Question

41

cannot change < label> text color

rated 0 times [ 47] [ 6] / answers: 1 / hits: 39755 / 13 Years ago, thu, march 8, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marinalyssak

Add To Favorites

Follow

Total Points: 637

Total Questions: 101

Total Answers: 94

Location: Morocco

Member since Fri, May 22, 2020

4 Years ago

answered 13 Years ago zachary · Accepted Answer

^{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 });