Comment puis-je modifier et supprimer dynamiquement les définitions de classe CSS avec JavaScript ?

Modifier et supprimer dynamiquement les définitions de classes CSS

L'ajout de classes CSS au moment de l'exécution est une manipulation JavaScript connue, mais elle étend ses fonctionnalités à la modification ou à la suppression les définitions de classes existantes peuvent sembler intimidantes. Cet article aborde ce défi en explorant les moyens de réaliser ces opérations par programmation.

Modification des définitions de classe CSS

Pour modifier une définition de classe CSS, suivez ces étapes :

1. Accédez aux feuilles de style du document à l'aide de document.styleSheets.
2. Parcourez la propriété cssRules de chaque feuille de style pour trouver la règle que vous souhaitez modifier.
3. Une fois la règle trouvée, mettez à jour sa propriété de style à l'aide de setProperty.

Par exemple, pour modifier la taille de la police de la classe .menu :

let styleSheet = document.styleSheets[0];
let rule = styleSheet.cssRules[1]; // Assuming ".menu" is the second rule
rule.style.setProperty('font-size', '15px');

Suppression des définitions de classe CSS

Pour supprimer une définition de classe CSS, suivez ces étapes :

1. Localisez la feuille de style et la règle comme décrit dans la section précédente.
2. Supprimez la règle de la collection cssRules à l'aide de deleteRule.

Par exemple, pour supprimer la définition de la classe .menu :

let styleSheet = document.styleSheets[0];
let rule = styleSheet.cssRules[1]; // Assuming ".menu" is the second rule
stylesheet.deleteRule(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!