Develop Reference

JavaScript DOM document function to add 'for' attribute to a html tag

I have following working code in HTML and JS:
HTML:
<label class="slider-text" for="masterChannel">
JS:
const masterChannel = document.querySelector('#masterChannel');
//Do more stuff...
now my plan is to convert my entire html code to JavaScript and so far, I have this:
var label = document.createElement("label");
label.classList.add("slider-text");
//here I need to add the 'for' attribute to 'label' tag
I was not able to find any method in JS to add for attribute to a tag and I am not sure if I can achieve the same result with a different approach.

I was not able to find any method in JS to add for attribute to a tag
Searching Google for "add attribute to tag with javascript" yields several correct answers, the 1st being setAttribute().
var label = document.createElement("label");
label.classList.add("slider-text");
label.setAttribute("for", "masterChannel");
console.log(label);
Additionally, as #Pointy mentioned, you can also use the .htmlFor DOM property on the object:
var label = document.createElement("label");
label.classList.add("slider-text");
label.htmlFor = "masterChannel";
console.log(label);
And, by the way, the code in your question of:
const masterChannel = document.querySelector('#masterChannel');
would not get a reference to the label you showed with this HTML:
<label class="slider-text" for="masterChannel">
because # in .querySelector() refers to the id of an element and you have no id in your label element's code. For the HTML you showed, you could use:
const masterChannel = document.querySelector("[for='masterChannel']");
because [] represent the attribute selector in CSS.

Inline Styling not working when property is set dynamically

I am using the elem.style object to add inline styling to an element. Which property to change varies and therefore is set dynamically. This, however, does not work. If I e.g. change it to elem.style.listStyleType or any other non-dynamically set property it does work.
The property is passed as a string so I already tried to remove the quotes from the string but that does not work either. Thanks for any help.
HTML:
<div class="example_cnt doc_widget_cnt" onchange="docWidget(event, this, 'listStyleType')">
JS:
var docWidget = function(evt, elem, cssPropVal){
if(evt.target.tagName === 'INPUT'){
var labelText = evt.target.parentElement.textContent;
elem.lastElementChild.style.cssPropVal = labelText;
}
}

Have you tried?
elem.lastElementChild.style[cssPropVal] = labelText;

How to dynamically create Polymer custom element after setting all attributes?

The problem is when I try to create custom element this way
var el= document.createElement('my-el');
el.setAttribute('tag-model', "[[myBinding]]");
it creates element without its attributes. How to construct custom element with all its attributes and then append to HTML to initilize them?
Thank you!

See this
It basically says to do it like that:
var dynamicEl = document.createElement("my-element");
dynamicEl.setAttribute("id", "my-element-id");
dynamicEl.setAttribute("greeting", "Hello, Good Morning.");
document.body.appendChild(dynamicEl);
However, if you want to change properties directly, it wont work with setAttribute. You have to do it like that:
var dynamicEl = document.createElement("my-element");
dynamicEl.greeting = 'Waaazaaaa???';
document.body.appendChild(dynamicEl);

How to read a CSS value from JavaScript?

I was wondering how you could read and save to a variable the CSS value of a HTML element. For example say you have this:
<tr id="presentationProperty" style="display: none;">
I would want to be able to read the display: none property and save it to a variable inside JavaScript. Is this possible and if so, how?

Easy:
var display = document.getElementById('presentationProperty').style.display;
Globally, you can access to styles properties of an element like this:
var getStyle = function(elementID, prop) {
return document.getElementById(''+elementID+'').style[prop];
};
alert (getStyle('presentationProperty', 'display')); // block
alert (getStyle('presentationProperty', 'position'));
alert (getStyle('presentationProperty', 'backgroundColor'));
// ...

First you need to get the element, and then you can use the style property:
var element = document.getElementById("presentationProperty");
var display = element.style.display;
See here for a full list of available style properties

If you want to read the final style applied to an element, use getComputedStyle(). This includes any style applied to the element, whether it is an external stylesheets, styles defined within the same document, element styles or styles applied by JavaScript.
var elem = document.getElementById("presentationProperty");
var theCSSprop = window.getComputedStyle(elem).getPropertyValue("display");

Try this:
var x = document.getElementById('presentationProperty').style.display;

You can use getComputedStyle() to get applied css value on particular element, something like this.
HTML
<tr id="presentationProperty" style="display: none;">
javaScript
var tr= document.getElementById('presentationProperty');
var computedStyle = document.defaultView.getComputedStyle(tr);
var dispVal = computedStyle['display']
This would more usefule when you appied the css(display) as external or internal css.

You can simply do this:
var el = document.getElementById('presentationProperty');
console.log(el.style.display);
It however will return empty string if the element has no display property defined inside css (i.e. it is inheriting default display property).

Try This for getting all properties:
var css = document.getElementById('presentationProperty').style.cssText;
alert(css);

Get an attributes value of the ALT attribute of a hyperlink

My a-tag (link) contains innerHTML which is an image like this:
.innerHTML = <img alt="hello world" src="/Content/Images/test.png">
How can I get the text of the alt attribute with JQuery?

You really don't need jQuery. If you have the a element you can do this:
// lets call the anchor tag `link`
var alt = link.getElementsByTagName('img')[0].alt; // assuming a single image tag
Remember attributes map to properties (most), and unless the property is changed, or the attribute, the two should reflect the same data (there are edge cases to this, but they can be handled case-by-case).
If you truly do need the attribute there is
var alt = link.getElementsByTagName('img')[0].getAttribute('alt');
Last scenario is if you only have the image tag as a string.
var str = '<img alt="hello world" src="/Content/Images/test.png">';
var tmp = document.createElement('div');
tmp.innerHTML = str;
var alt = tmp.getElementsByTagName('img')[0].alt;
If you must use jQuery (or just prefer it) then the other answer provided by Alexander and Ashivard will work.
Note: My answer was provided for completeness and more options. I realize the OP asked for jQuery solution and not native js.

Being $a your <a/> element.
Using jQuery you can do:
$("img", $a).first().attr("alt");
Or, using pure JavaScript:
var $img = $a.getElementsByTagName("img")[0];
console.log($img.alt);
​
See it here.

use this.
var altName=$('a img').attr('alt');