Comment puis-je modifier les valeurs des feuilles de style CSS avec JavaScript ?

Accès et modification des styles CSS avec JavaScript

Lors de la modification des styles CSS à l'aide de JavaScript, il est crucial de cibler les éléments et les valeurs corrects. Les valeurs CSS en ligne peuvent être facilement modifiées, mais obtenir et modifier les valeurs définies dans la feuille de style peut s'avérer difficile.

Accès aux valeurs de la feuille de style CSS

Pour accéder aux valeurs de la feuille de style CSS à partir d'un id, suivez ces étapes :

1. Récupérez toutes les feuilles de style à l'aide de document.styleSheets.
2. Déterminez la feuille de style souhaitée en fonction de sa propriété href.
3. Obtenez le tableau de règles (par exemple, cssRules dans la plupart des navigateurs, règles dans IE).
4. Identifiez la règle spécifique à l'aide de sa propriété selectorText.

Modification des valeurs de la feuille de style CSS

Une fois la règle souhaitée identifiée, vous pouvez la modifier :

1. Définissez la propriété selectorText pour changer le sélecteur (par exemple, de #tId à #newId).
2. Définissez la propriété value pour modifier la valeur CSS (par exemple, de width : 50 % à width : 30%).

Exemple

Dans le scénario fourni :

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

Vous pouvez utiliser le JavaScript suivant pour modifier la propriété width dans la feuille de style :

var rule = document.styleSheets[0].cssRules[0];
rule.selectorText = "#tId";
rule.value = "width: 30%";

Cela mettra à jour la règle de la feuille de style en :

#tId {
      width: 30%;
   }

Notez que les styles en ligne ont toujours la priorité sur les valeurs des feuilles de style. Pour remplacer les styles en ligne, utilisez document.getElementById('id').style.width = value.

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!