Comment modifier les objets de déclaration CSS en JavaScript sans écraser les styles existants ?

Accès et modification des objets de déclaration CSS

Dans le développement Web, vous pouvez rencontrer le besoin de modifier les styles CSS sans recourir au style en ligne, qui peut écraser les styles existants et perturber les fonctionnalités. Cet article montrera comment accéder et modifier les objets de déclaration CSS à l'aide de JavaScript.

Considérez le code CSS suivant :

<code class="css">.box {
  color: green;
}

.box:hover {
  color: blue;
}</code>

Ce CSS crée une boîte avec du texte vert qui devient bleu au survol. Cependant, si vous appliquez un style en ligne pour la couleur, le comportement de survol sera perdu :

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

Pour éviter ce problème, vous pouvez accéder à l'objet de déclaration CSS et le modifier directement. JavaScript fournit la propriété cssRules sur l'objet feuille de style DOM qui correspond à votre feuille de style. Vous pouvez utiliser cette propriété pour obtenir un tableau de toutes les règles CSS.

Pour modifier une règle CSS, vous pouvez utiliser la propriété style de l'objet règle. Par exemple, pour changer la couleur de la boîte en rouge, vous pouvez utiliser le JavaScript suivant :

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

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

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

Vous pouvez voir une démonstration de cette technique sur 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!