Question

My research into the base HTML DOM element says this about any DOM element’s “style” property
(from http://www.w3schools.com/jsref/dom_obj_all.asp):

   "style --    Sets or returns the style attribute of an element"

The ‘label’ tag is a dom element. And thus it has a ‘style’ property. As it points out on the w3schools link
above, all dom elements have a ‘style’ property.

And in fact, here I’m setting (inline) the ‘style’ property for a label tag — and this works fine:

    <label for="itemImageId" style="color: gray" id="labelForImageUploadID">Item image</label>

The label text color is gray at page load time.

Under a certain condition (user has indicated they’re ready to select an image to upload) —
I need to show the upload as ‘enabled’ by changing the initial gray text color of the above to black.

Do I know I could use a css class for this label’s text color and use the ‘className’ property to dynamically
alter the css class of the above? You bet I do. Tonight though I’m holding this DOM element’s feet
to the fire. I just have one ‘style’ attribute to change (text color) and don’t want to add a class just for it
— what I’m trying here should work according to the docs.

I want to know why I can’t use the ‘style’ property as the DOM says I can — “get” AND “set” DOM element’s
properties.

Here I’m “set”-ing the ‘style’ property of my — this does NOTHING — the label text remains gray:

    document.getElementById('labelForImageUploadID').style = "color: rgb(0,0,0)";

Nor does this change the color from gray to black:

    document.getElementById('labelForImageUploadID').style = "color: black";

The above code executes (in javascript) after the label is already visible on the page, and in response to an onclick event of a button on the form that the label is also a part of.

Is there a bug in the ability to “set” a DOM element’s ‘style’ property?
According to http://www.w3schools.com/jsref/dom_obj_all.asp,

   "HTMLElement Object

    The following properties, and methods can be used on all HTML elements."

        (other properties here.....)
   "style --    Sets or returns the style attribute of an element"
       (still other properties here......)

So why can’t I change the element’s ‘style’ property then in my code above?

Answer 1

^{Upon reviewing this answer in 2017, the original example of setting the whole style string does work correctly. I don’t know what the problem was,
but the examples below are still valid approaches.}

---

Setting a style with JavaScript usually follows the following format:

document.getElementById("abc").style.[css property name in camel case] = "[value]";

• Basic Example
• Event-triggered Example

If using jQuery, it becomes a bit cleaner:

// find all elements with the tag name "bar" that are direct 
// descendants of an element with the class name "foo"
$(".foo > BAR").css("color", "red");

// set multiple properties
$(".foo > BAR").css({ color: "red", "background-color": "beige" });