La définition de la valeur innerHTML pour <style> ne fonctionne pas dans IE7

Question

Je cherche un moyen d'ajouter dynamiquement des styles à ma feuille de style avec Javascript.

Dans les navigateurs d'aujourd'hui, je peux l'utiliser par exemple:

<style> 
#id{background-color:#F00;color:#000;} 
</style> 
<div ID="id">Test1</div> 
<div ID="id2">Test</div> 
<script> 
document.getElementById('ID').innerHTML+="#id2{color:#00F}"; 
</script> 

Ce qui précède changer la couleur de test du noir au bleu en raison du javascript, mais ce code ne fonctionne pas avec les anciens navigateurs tels que Internet Explorer 7.

Dans Internet Explorer 7, j'ai réduit le problème au fait qu'il génère un symbole d'avertissement javascript dans le coin inférieur gauche lorsque l'on s'attend à définir la valeur innerHTML de l'élément de style.

J'ai essayé de remplacer:

document.getElementById('ID').innerHTML+="#id2{color:#00F}"; 

avec:

document.getElementById('ID').appendChild(document.createTextNode("#id2{color:#00F}")); 

et je suis toujours sans succès.

J'ai besoin de javascript pour cela car je veux définir l'image d'arrière-plan pour plusieurs éléments à la fois, et en écrasant en code CSS, je ne peux appeler l'image qu'une seule fois. Si j'ai utilisé des propriétés javascript natives pour chaque élément, alors je passe par de nombreux éléments et demande plusieurs fois le chargement du même élément, et si IE est mauvais avec la mise en cache, alors le fardeau sera placé sur le serveur.

Que puis-je faire en Javascript pour ajouter des données CSS à l'élément de style qui fonctionne avec IE 7? Je cherche quelque chose de simple.

Answer 1

Eh bien, je suis retourné à l'ancien temps, et a réussi à retirer ceci dans IE 7:

document.write('<style>'+d+'</style>'); 

la variable d est les règles réelles à insérer.

Je comprends que c'est une méthode plus lente car elle crée de nombreux tags <style>, ce qui est une mauvaise pratique HTML, mais l'idée fonctionne dans IE7.