using javascript to change style.color of a <label> element FAILS

Question

The following code works in FF but not in IE9:

     // turn on the 'image file upload' field and its label
    document.getElementById('itemImageId').disabled = false;
    document.getElementById('labelForImageUploadID').style.color = "black";

Here is the HTML with the label and the file input:

    <label for="itemImageId" style="color: silver" id="labelForImageUploadID">Item image
            (select to change the item's current image)</label>
    <input type="file" size="100px" id="itemImageId" disabled="disabled"
                     name="theFileUpload"></input>

** EDIT ** The above label and file upload tags are nested inside the following div -- I added this so you can see how the mouse click is handled. The handleRowClick() function has the above Javascript code that tries to turn the text black:

      <div class="itemlistRowContainer" id="topmostDiv_ID" onclick="handleRowClick(this);"
         onmouseover="handleMouseOver(this);" onmouseout="handleMouseOut(this);"
         ondblclick="handleDblClick(this);">

So when this label first appears on the page, its color is correct -- it is silver due to the inline color style.

Then the Javascript code above executes on a mouse click.

In Firefox, the Javascript code turns the label text to black, and enables the file upload control.

However in IE9 the label's text stays gray.

Does IE9 not support style.color = "somecolor" to dynamically control colors of the label tag?

I've looked at a few other posts, and the only quirk I found was that if you have enabling/disabling happening dynamically, to make sure the tag is ENABLED in IE9 before you try to change its color.

That's not a factor here as the code never disables the label tag.

It's not just this one label tag either -- all the label tags on the page fail to turn black but ONLY in IE9 -- in FF everything works.

Is there a 'gotcha' or a trick I'm missing?

Answer 1

I fixed this.

The original problem was -- my label tags would not redraw/refresh in IE when I changed their text color from silver to black -- this code below failed but ONLY in Internet Explorer -- the code below worked FINE in Firefox etc.:

   // turn on the 'image file upload' label
document.getElementById('labelForImageUploadID').style.color = "black";

SYMPTOMS AND CLUES

Did I know that the above code was, in fact, changing the text of the label to black in IE? Yes. But to see the text color change on the label tags on my page after the above code executed, I had to either:

• resize the IE browser window -- and BAM the label text changed to black

• or doubleclick in an empty area of the IE browser window -- same effect, the label text would then show the effects of the above code, the text would turn black.

So I knew the color change to black was working in the code, and I learned that the problem "must be that the IE9 browser window is not refreshing the label tag after the color change."

Here are a couple things I tried that had no effect:

• made 'hasLayout' true by adding zoom:1 to the style of the label and to its parent div

• added a fixed pixel width to the label and to its parent div

These 2 attempts were based on what I read HERE

Those things did not help. Besides, I already had 'display:inline-block' for the label's parent div which also (supposedly) forces 'hasLayout' for IE issues.

HERE IS THE SOLUTION

    // THIS DID NOT WORK IN IE BUT WAS FINE IN Firefox:
       // document.getElementById('labelForImageUploadID').style.color = "black";

    // THIS WORKS IN IE and IN FIREFOX
    var imageUploadLabel = document.getElementById('labelForImageUploadID');
    imageUploadLabel.style.color = "black";
    imageUploadLabel.style.display = "none";
    imageUploadLabel.style.display = "inline-block"

What a kludgy piece of code.

I'm sure there's probably a more elegant way (I thought hasLayout, zoom:1, etc. would work but for me no such luck).

At the time I wrote my solution here, no one had (yet) chimed in with a more elegant way to force IE to redraw my label tags when I change their text color -- maybe after seeing my workaround here someone will provide a more elegant way to force IE to redraw label tags when their text color changes.

ONE THING I will add: maybe my DOCTYPE is causing this problem -- chime in if you think it is. This is the DOCTYPE I use on my pages:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Answer 2

The code works fine:

http://jsfiddle.net/AlienWebguy/HKhjs/

My assumption is you're relying on addEventlistener() only which is merely JavaScript. IE uses it's own flavor called JScript which uses attachEvent.

object.attachEvent(event, callback)