Attribute selectors, JavaScript and IE8

Question

I'm attempting to use attribute selectors and CSS for formatting elements.

The HTML looks like:

<div id="user" highlight="false">User Name</div>

The CSS is:

[highlight=true]
{
    background-color: red;
}

[highlight=false]
{
    background-color: white;
}

And then there's some accompanying JavaScript:

if( foo )
{
    node.setAttribute('highlight', true);
}
else
{
    node.setAttribute('highlight', false);
}

This works in Firefox and Chrome. When the highlight attribute gets changed by the JavaScript, the element's background color changes as appropriate. In IE8, however, it's a different story. The element will display correctly according to the highlight value that is initially assigned in the HTML, but when the attribute is changed dynamically the display of the element doesn't change.

Is this a known quirk, and is there a known work-around?

Update I just changed the attribute name to "frob" with values "on" and "off." That should settle any issue about reserved or interpretable values.

One other thing of note. When I turn on the IE8 developer tools and use the HTML inspector, it will show the style [frob=on] or [frob=off] as applied for whatever value frob had when I started the document inspector. However, the frob attribute will then no longer change in the inspector view. In no case do the values in the [frob=on/off] css ever get applied after the initial render of the HTML.

Update: Problem Solved The solution is to force a redraw. There are various ways of doing this, but it appears the standard one is to reassign the className to itself.

Answer 1

You are setting the attribute to JavaScript true and false, not string "true" and "false". This could be interpreted by the browser as 1 and 0 and lead to unwanted results.

Can you try

node.setAttribute('highlight', 'true');

?

Answer 2

You're using unknown attribute hightlight. It's IE so it supports attributes according to its name (what's seems to be harder than supports every attribute name, but... it's IE).

Just use class="hightlight" - easier to implement and deal with.

Answer 3

to avoid inevitable cross-browser compatibility issue's with javascript/css I would recommend using jQuery.

For example, to highlight an element via the jQuery framework this is all that it takes...

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

Answer 4

Make sure you have DOCTYPE defined at the top of the page: http://stackoverflow.com/questions/2185549/css-attribute-selector-for-input-typebutton-not-working-on-ie7/3386459#3386459

Answer 5

Check to make sure you have a DOCTYPE defined at the top of your page: http://stackoverflow.com/questions/2185549/css-attribute-selector-for-input-typebutton-not-working-on-ie7/3386459#3386459