Próbuję użyć selektorów atrybutów i CSS do formatowania elementów.

HTML wygląda tak:

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

CSS to:

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

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

A potem towarzyszy Ci JavaScript:

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

Działa to w Firefoksie i Chrome. Gdy atrybut podświetlenia zostanie zmieniony przez JavaScript, kolor tła elementu zmieni się odpowiednio. W IE8 jest to jednak inna historia. Element będzie wyświetlany poprawnie zgodnie z wartością podświetlenia, która jest początkowo przypisana w kodzie HTML, ale gdy atrybut zostanie zmieniony dynamicznie, wyświetlanie elementu nie ulega zmianie.

Czy to znane dziwactwo i czy istnieje znane obejście?

Aktualizacja Właśnie zmieniłem nazwę atrybutu na „frob” z wartościami „on” i „off”. Powinno to rozstrzygać wszelkie kwestie dotyczące wartości zastrzeżonych lub interpretowalnych.

Jeszcze jedna uwaga. Kiedy włączę narzędzia programistyczne IE8 i skorzystam z inspektora HTML, pokaże on styl [frob = on] lub [frob = off] zgodnie z tym, co zastosowano dla dowolnej wartości frob, gdy uruchomiłem inspektora dokumentów. Jednak atrybut frob nie zmieni się już w widoku inspektora. W żadnym przypadku wartości w [frob = on / off] css nigdy nie zostaną zastosowane po początkowym renderowaniu HTML.

Aktualizacja: problem rozwiązany Rozwiązaniem jest wymuszenie przerysowania. Są na to różne sposoby, ale wydaje się, że standardowym jest ponowne przypisanie nazwy klasy do siebie.