Comment modifier dynamiquement les déclarations CSS avec JavaScript ?

Accéder et modifier les déclarations CSS avec JavaScript

Pour modifier les déclarations CSS de manière dynamique, sans recourir au style en ligne, accédez à l'objet d'ensemble de règles CSS à partir de la feuille de style DOM.

Comment modifier les déclarations CSS

1. Obtenir l'objet feuille de style :

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

   Copier après la connexion

2. Récupérer les règles CSS :

   <code class="javascript">var rules = sheet.cssRules || sheet.rules;</code>

   Copier après la connexion

3. Sélectionner la règle souhaitée à l'aide de son index :

   <code class="javascript">var rule = rules[0];</code>

   Copier après la connexion

4. Modifier la règle styles :

   <code class="javascript">rule.style.color = 'red';</code>

   Copier après la connexion

Exemple

Considérons l'exemple suivant :

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

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

Pour changer la couleur du texte de .box en rouge, sans affecter le comportement de survol :

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.color = 'red';</code>

Remarque pour Internet Explorer

Internet Explorer utilise des règles au lieu de cssRules pour accéder aux règles CSS.

Démonstration

Une démonstration en direct de l'accès et de la modification des déclarations CSS avec JavaScript peut être trouvée 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!