Comment accéder et modifier les déclarations CSS directement à l'aide de JavaScript ?

Accès et modification des déclarations CSS avec JavaScript

Le style en ligne offre une approche simple pour modifier l'apparence d'un élément, mais il peut remplacer les règles CSS existantes et perturber le comportement prévu. Pour éviter cela, les développeurs peuvent choisir de modifier directement les objets de déclaration CSS.

Les objets de déclaration CSS sont accessibles via la propriété styleSheets de l'objet document. Chaque objet styleSheet contient une collection de cssRules (ou règles dans Internet Explorer). Ces règles représentent des styles définis dans la feuille de style respective.

Pour modifier un objet de déclaration CSS, récupérez la règle correspondante dans la collection cssRules de la feuille de style et accédez à sa propriété style. Par exemple :

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

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

Ce code modifiera la déclaration de couleur de la première règle de la feuille de style en « rouge ».

Notez que la modification de la propriété de style d'une règle remplacera toute propriété existante. déclarations dans le cadre de cette règle. Pour modifier sélectivement des propriétés spécifiques, utilisez la syntaxe suivante :

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

rules[0].style['background-color'] = 'blue';</code>

Ce code modifiera uniquement la propriété background-color de la première règle.

Démontrant cette technique, le JSFiddle suivant montre comment pour modifier la couleur d'un élément avec une classe de "box", sans affecter l'effet de survol : 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!