Comment modifier dynamiquement les styles de classe CSS en JavaScript sans getElementById ?

Modification des styles de classe CSS en JavaScript sans getElementById

Problème :

Comment modifier dynamiquement les styles CSS d'un élément en ciblant une classe en JavaScript sans utiliser getElementById ?

Réponse :

Bien qu'il soit possible de modifier les styles CSS à l'aide du tableau styleSheets en JavaScript , une alternative plus efficace consiste à créer des styles séparés avec les paramètres d'affichage souhaités.

Par exemple, créez une feuille de style avec la règle suivante :

.hidden {
  display: none;
}

Pour appliquer ce style à un élément , utilisez la méthode Remove() :

const element = document.querySelector(".hidden");
element.classList.remove("hidden");

Cela supprime la classe cachée et ses règles de style, rendant l'élément visible.

Remarque supplémentaire :

Il est important de noter que cette approche crée de nouvelles règles de style dans le DOM. Bien qu'elle offre plus de flexibilité et de contrôle sur le style, une utilisation excessive de cette méthode peut gonfler l'utilisation de la mémoire du document.

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!