Sélecteurs d'attributs, JavaScript et IE8

Je tente d'utiliser les sélecteurs d'attributs et les CSS pour les éléments de mise en forme.

Le HTML ressemble à:

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

Le CSS est:

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

Et puis il y a des JavaScript accompagnant:

• Pour utiliser getAttribute (), ou ne pas utiliser getAttribute (): c'est la question
• Javascript – obtenez un attribut personnalisé basé sur un identifiant
• Quel est l'attribut de rôle XHTML? Qu'utilisez vous pour ça?
• Comment puis-je passer plusieurs attributs dans une directive d'attributs Angular.js?
• Comment définir plusieurs attributs avec une fonction de valeur?

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

Cela fonctionne dans Firefox et Chrome. Lorsque l'attribut de surbrillance est modifié par le JavaScript, la couleur d'arrière-plan de l'élément change selon le cas. Dans IE8, cependant, c'est une histoire différente. L'élément s'affiche correctement en fonction de la valeur de surbrillance qui est initialement attribuée dans le code HTML, mais lorsque l'attribut est modifié dynamiquement, l'affichage de l'élément ne change pas.

Est-ce une quirk connue, et il y a un travail connu?

Mise à jour Je viens de changer le nom de l'attribut en "frob" avec les valeurs "on" et "off". Cela devrait régler toute question relative aux valeurs réservées ou interprétables.

Une autre chose à noter. Lorsque j'ouvre les outils de développement IE8 et que j'utilise l'inspecteur HTML, il affichera le style [frob = on] ou [frob = off] comme appliqué pour la valeur que frob avait eu lorsque j'ai commencé l'inspecteur des documents. Toutefois, l'attribut frob ne changera plus dans la vue de l'inspecteur. En aucun cas, les valeurs du [frob = on / off] css ne sont appliquées après le rendu initial du HTML.

Mise à jour: problème résolu La solution consiste à forcer un redessin. Il existe plusieurs façons de le faire, mais il semble que la norme soit de réaffecter le nom de classe à lui-même.

• Supprimer l'attribut (Chrome)
• Quand utiliser setAttribute vs .attribute = en JavaScript?
• Obtenez tous les attributs à partir d'un élément HTML avec Javascript / jQuery

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

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