JavaScript peut-il modifier dynamiquement les ensembles de règles CSS ?

Manipulation des ensembles de règles CSS avec JavaScript

Question :

Les ensembles de règles CSS peuvent-ils être modifiés dynamiquement à l'aide de JavaScript, comme changer le style de plusieurs éléments avec la même classe sur un site Web page ?

Réponse :

Bien qu'il soit possible d'effectuer de telles modifications CSS avec JavaScript, le processus implique certaines complexités. Un guide complet à ce sujet peut être trouvé dans l'article "Totally Pwn CSS with Javascript".

Pour implémenter la modification susmentionnée, suivez ces étapes :

1. Accédez à l'ensemble de règles en utilisant Méthodes DOM.
2. Modifiez les propriétés de l'ensemble de règles comme vous le souhaitez.
3. Réappliquez l'ensemble de règles mis à jour au éléments.

Mise en œuvre :

Firefox et IE : Le code ci-dessous a été testé pour fonctionner dans ces navigateurs :

// Access the rule-set
var styleSheet = document.styleSheets[0]; // assuming there's only one
var ruleSet = styleSheet.cssRules[0]; // assuming there's only one

// Modify the rule-set
ruleSet.style.color = "red";

// Reapply the updated rule-set
stylesheet.insertRule(ruleSet.cssText, 0);

Chrome : Avec les mises à jour dans Chrome, prise en charge des méthodes DOM susmentionnées est maintenant disponible.

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!