## Comment modifier les règles CSS avec JavaScript sans style en ligne ?

Modification des règles CSS avec JavaScript sans style en ligne

Il est parfois nécessaire de modifier les déclarations CSS de manière dynamique sans recourir au style en ligne. Prenons l'exemple suivant :

<code class="html"><style>
    .box {color:green;}
    .box:hover {color:blue;}
</style>

<div class="box">TEXT</div></code>

Cela produit une boîte bleue qui devient verte au survol. Cependant, le style en ligne peut remplacer ce comportement :

<code class="html"><div class="box" style="color:red;">TEXT</box></code>

Dans ce cas, la case sera toujours rouge, quel que soit l'état du survol.

Pour éviter ce problème, vous pouvez modifier le Objet de déclaration CSS directement. Voici comment :

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';</code>

Notez qu'Internet Explorer utilise des règles au lieu de cssRules.

Voici une démo : [Fiddle](http://jsfiddle.net/8Mnsf/1/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!