Maison > interface Web > tutoriel CSS > Comment puis-je modifier ou supprimer dynamiquement les définitions de classe CSS en JavaScript ?

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

Mary-Kate Olsen
Libérer: 2024-12-15 09:52:11
original
409 Les gens l'ont consulté

How Can I Dynamically Modify or Remove CSS Class Definitions in JavaScript?

Comment modifier ou supprimer dynamiquement des définitions de classe CSS

Bien que l'ajout de nouvelles définitions de classe CSS au moment de l'exécution à l'aide de JavaScript soit réalisable, la possibilité de modifier ou éliminer ceux qui existent déjà est également crucial.

Changer la classe CSS Propriétés

Pour modifier la règle de taille de police de la classe .menu, lui permettant d'affecter tous les éléments de la page qui l'utilisent, vous pouvez suivre les étapes suivantes :

  1. Récupérez le tableau des feuilles de style à l'aide de document.styleSheets.
  2. Pour chaque feuille de style, parcourez les cssRules array.
  3. Localisez la règle qui correspond à la classe .menu à l'aide de la propriété selectorText.
  4. Utilisez la méthode style.setProperty('font-size','10px',null) pour mettre à jour la propriété font-size de la règle.

Suppression de la classe CSS Définitions

Pour supprimer la définition de classe .menu, effectuez les étapes suivantes :

  1. Répétez les étapes 1 et 2 de la section précédente.
  2. Trouvez le règle qui correspond à la classe .menu en utilisant la propriété selectorText.
  3. Utilisez la méthode deleteRule() pour supprimer la règle du feuille de style, par ex. stylesheet.deleteRule(index), où index est l'index de la règle dans le tableau cssRules.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal