Ajout de! Important dans une feuille de style écrite dynamiquement pour Internet Explorer

Question

J'ai expérimenté l'utilisation de javascript pour écrire dynamiquement des feuilles de style. Dans Firefox, on peut utiliser la méthode setProperty sur le style pour le cssRules du styleSheets, comme ...

document.styleSheets[0].cssRules[0].style 
    .setProperty(propertyName, propertyValue, 'important'); 

... pour définir le drapeau !important sur le style. Je n'ai pas trouvé un équivalent pour cela dans Internet Explorer (la méthode setAttribute n'a pas une telle option pour définir le drapeau !important sur un style). Certaines expérimentations ont trouvé que pour les styles exacts, tels que border-top-width, je peux réécrire la chaîne cssText pour ajouter le !important, mais ensuite j'ai découvert que si vous définissez individuellement toutes les bordures, IE réécrit la règle actuelle pour qu'elle soit une forme courte, donc elle réécrit à border-top, border-right, etc., et chacun est défini, mais sans le drapeau !important. En outre, si je l'ai explicitement défini via le formulaire court, il ne pas accepter une réécriture du cssText pour prendre le drapeau !important. Donc, la question est, est-ce que quelqu'un sait d'une manière, lors de l'écriture dynamique des styles à une règle styleSheets, pour qu'IE puisse définir de façon cohérente l'indicateur !important pour cette règle?

Merci pour votre aide,

Scott

Answer 1

J'ai passé un peu plus de temps à faire des tests, et nous sommes venus à la conclusion que ma réécriture du cssTextest de travail pour ajouter !important à une mystérieuse définition du drapeau interne de IE, même si les propriétés raccourcies qui lui-même réécrit pour le cssText ne reflètent pas cela.

Apparemment, ni la propriété cssText (si elle est examinée après mon rewrite pour ajouter le !important) ni l'examen de la barre d'outils Microsoft Developer de l'élément montrent le fait que la propriété bénéficie d'un cadre !important sur elle. L'élément est cependant affiché comme si ma réécriture fonctionnait. Je l'ai testé en plaçant un !important sur le style de base pour une bordure d'image comme ceci:

img {border: 3px solid green !important;} 

Puis, avec javascript j'ai créé mon styleSheets objet et ajouté une règle qui était à la fois plus spécifique (en utilisant la id de l'image) et qui avait son cssText réécrit avec !important après avoir déjà mis le style de l'objet styleSheets par un appel javascript pour borderTopColor = red. Je définis ensuite le style en ligne de l'élément pour changer la couleur du haut en jaune. Les résultats étaient comme je m'attendais avec le drapeau !important. Le rouge l'emporte, car il s'agit d'un appel ultérieur (et plus spécifique) que le vert d'origine, et le style inline ne le remplace pas. Si je supprime la réécriture du !important alors la couleur redevient verte, et si j'enlève !important du vert, la couleur redevient jaune.

J'ai également testé ceci avec le vert ayant une spécificité de sélecteur plus élevée que mon style javascript écrit pour le rouge.Cela aussi, s'est comporté comme prévu, avec le vert gagnant parce qu'il avait maintenant la spécificité de sélecteur plus élevée avec la concurrence !important de la déclaration rouge.

Cela a été testé sur IE8, IE7 et IE6 (oui, cela a fonctionné là aussi). Alors que la réécriture/réglage du cssText du styleSheets n'est pas aussi simple que de pouvoir le définir avec un appel javascript directement sur la propriété, au moins cela fonctionne. Le vrai 'bug' est le fait que ni le cssText ni la Developer Toolbar ne m'ont donné l'information correcte qu'un drapeau !important a été placé sur ces styles, donc si quelqu'un revenait et examinait le site, ils pourraient se demander pourquoi quelque chose est en train de se passer avec les styles (pourquoi quelque chose qui ne semble pas important agit comme si c'était le cas).

Answer 2

Je pense que votre meilleur pari est ici pour écrire votre code CSS afin que vous ne devez pas utiliser! Important pour remplacer les styles dans la cascade. C'est nul, mais c'est comme ça que l'IE s'effondre.