css - Attribute selectors, JavaScript and IE8 - Stack Overflow

admin管理员组

文章数量:1415460

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 acpanying 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.

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 acpanying 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.

• javascript
• css
• internet-explorer-8
• attributes

Share Improve this question Follow edited Jan 22, 2010 at 0:10 Kennet Belenky asked Jan 21, 2010 at 20:48 Kennet BelenkyKennet Belenky 2,7531818 silver badges2121 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

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');

?

to avoid inevitable cross-browser patibility issue's with javascript/css I would remend 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);
});

Make sure you have DOCTYPE defined at the top of the page: Css attribute selector for input type="button" not working on IE7

Check to make sure you have a DOCTYPE defined at the top of your page: Css attribute selector for input type="button" not working on IE7

本文标签： cssAttribute selectorsJavaScript and IE8Stack Overflow