Comment puis-je modifier dynamiquement les valeurs CSS définies dans une feuille de style à l'aide de Javascript ?

Changer les valeurs CSS avec Javascript : Comprendre la manipulation des feuilles de style

Souvent, nous constatons le besoin de modifier les valeurs CSS de manière dynamique à l'aide de Javascript. Bien que la définition de valeurs CSS en ligne soit simple, cela peut présenter des défis lorsque le CSS est défini dans une feuille de style.

Exemple :

Considérez le code HTML suivant :

<code class="html"><div id="tId" style="width: 10px"></div></code>

Et le CSS correspondant :

<code class="css">#tId {
  width: 50%;
}</code>

La modification de l'attribut de style en ligne à l'aide de Javascript remplacera les valeurs de la feuille de style, comme indiqué ci-dessous :

document.getElementById('tId').style.width = "30%";

Cela entraîne :

<code class="html"><div id="tId" style="width: 30%"></div></code>

Défi :

Le problème avec cette approche est que :

• Elle n'affecte que les valeurs en ligne.
• Récupérer la valeur de largeur avant de la modifier renvoie Null lorsqu'il n'y a pas de style en ligne.

Solution : manipuler les valeurs des feuilles de style

Pour relever ces défis, nous avons besoin pour manipuler les valeurs directement dans la feuille de style. Voici comment y parvenir :

1. Obtenez un tableau de feuilles de style à l'aide de document.styleSheets.
2. Trouvez la feuille de style spécifique que vous souhaitez modifier à l'aide de document.styleSheets[styleIndex].href.
3. Obtenez un tableau de règles CSS en utilisant document.styleSheets[styleIndex].cssRules (pour la plupart des navigateurs) ou document.styleSheets[styleIndex].rules (pour IE).
4. Identifiez la règle CSS que vous souhaitez modifier en vérifiant la propriété selectorText.

Le code suivant illustre cette approche :

var styleIndex = ...; // Index of the targeted stylesheet
var ruleIndex = ...; // Index of the targeted CSS rule
var cssRuleCode = document.all ? 'rules' : 'cssRules';
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var value = rule.value; // Get the current value
rule.value = ...; // Modify the value

En implémentant cette approche, vous pouvez manipuler efficacement les valeurs CSS dans les feuilles de style, en garantissant que les modifications sont appliquées globalement à tous les éléments du style spécifié.

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!