Comment puis-je accéder et modifier par programme les valeurs CSS non-inline à l'aide de JavaScript ?

Modification des valeurs CSS avec Javascript

Accès aux valeurs CSS non en ligne

En JavaScript, Les valeurs CSS en ligne peuvent être facilement modifiées à l'aide de document.getElementById('id').style.width = value. Cependant, cette méthode pose problème lorsqu'il s'agit de valeurs CSS non-inline définies dans des feuilles de style. La récupération de ces valeurs à l'aide de JavaScript renvoie Null, ce qui rend difficile l'exécution de certaines opérations logiques.

Modification par programmation des propriétés de style

Pour résoudre ce problème, les feuilles de style CSS sont accessibles et modifié par programme. Voici comment :

1. Récupérez le tableau de feuilles de style à l'aide de document.styleSheets.
2. Localisez la feuille de style spécifique en comparant sa propriété document.styleSheets[styleIndex].href au chemin attendu.
3. Obtenez le tableau des règles CSS en utilisant document.styleSheets[styleIndex].rules dans IE ou document.styleSheets[styleIndex].cssRules dans d'autres navigateurs.
4. Identifiez la règle souhaitée en comparant sa propriété selectorText au sélecteur connu (par exemple, #tId).

Une fois la règle est identifié, sa propriété value peut être lue et définie. Cela permet à la fois de récupérer et de modifier les valeurs CSS sans modifier les styles en ligne. Le code suivant illustre ce processus :

var styleIndex = 0; // Index of the stylesheet to modify
var ruleIndex = 1; // Index of the rule to modify
var cssRuleCode = document.all ? 'rules' : 'cssRules'; // Account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; // e.g., '#tId'
var value = rule.value; // Get the current value or set a new value using `rule.value = 'new_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!