Comment modifier les classes CSS en JavaScript

Tout développeur Web commence son parcours en apprenant HTML, CSS et JavaScript. HTML donne une structure à nos pages Web, JavaScript est un langage de programmation Web qui nous donne la possibilité d'interagir avec les utilisateurs tandis que CSS nous donne la possibilité de styliser nos applications Web et nos pages Web. Pour manipuler et travailler avec les cours CSS, JavaScript nous propose liste de classe et nom du cours Propriétés qui peuvent être utilisées pour manipuler l'attribut de classe.

Le nom de classe peut être utilisé par JavaScript pour manipuler l'élément spécifié tandis que CSS utilise ce nom de classe pour styliser cet élément. Par conséquent, dans cet article, nous allons passer par la façon de modifier les classes CSS en JavaScript, mais nous définissons d'abord l'environnement en initialisant les éléments en HTML, puis en stylisant cet élément dans CSS.

Configuration de l'environnement

Créons un élément div qui fonctionne comme un conteneur et placez deux éléments à l'intérieur de ce conteneur. On sera le h2 Tag et l'autre sera le p étiqueter. Pour lier le fichier CSS à ce HTML, nous avons inséré un lien Tag dans la tête et référencé notre fichier CSS dans l'attribut HREF (style.CSS):

Angleterre

La capitale de l'Angleterre est Londres

Pour obtenir la référence du div élément à l'intérieur de CSS, nous avons utilisé l'attribut de classe. Nous avons effectué un style sur le conteneur Div ainsi que les éléments à l'intérieur du conteneur div.

.récipient
Color en arrière-plan: RVB (54, 224, 207);

.contenerh2, p
Couleur: RVB (125, 104, 184);

La sortie ressemblera à ceci:

Modifier les cours CSS

Comme mentionné dans la partie introductive de cet article, JavaScript nous propose liste de classe et nom du cours Propriétés qui peuvent être utilisées pour manipuler l'attribut de classe.Le nom du cours est utilisé pour définir une valeur sur une classe directement alors qu'à l'aide de la propriété ClassList, nous pouvons remplir les fonctions suivantes:

• liste de classe.ajouter() est utilisé pour ajouter des valeurs de classe
• liste de classe.basculer() est utilisé pour activer ou désactiver une classe
• liste de classe.remplacer() est utilisé pour remplacer une valeur de classe par une autre valeur de classe
• liste de classe.contient() est utilisé pour vérifier si une valeur existe ou non
• liste de classe.retirer() est utilisé pour supprimer une valeur de classe

Passons un exemple par exemple pour mieux comprendre la propriété de la liste de classe et ses méthodes intégrées et nous utiliserons le même code HTML et CSS que nous avons utilisé plus tôt. Tout d'abord, utilisons la propriété ClassName pour attribuer une classe à la h2 attribut. À cette fin, nous avons fait référence à une classe dans CSS qui n'existe pas pour le moment et à lui donner un style ci-dessous:

.Info
Color d'arrière-plan: blanc;
Border: 2px noir solide;

Ensuite, obtenez la référence du h2 élément utilisant le queySelector ('H2') qui sélectionnera le premier élément H2 dans le code HTML. Ensuite, utilisez la propriété ClassName pour attribuer le Info classe à l'élément H2. Le code JavaScript est donné ci-dessous:

// Sélectionnez First H2 Element
const myh2 = document.queySelector ('H2');
// Définissez la classe d'informations sur myh2
myh2.className = 'info';

Pour référence à ce code JavaScript, utilisez la balise de script avec l'attribut SRC dans le code HTML donnant au nom de fichier JavaScript dans l'attribut SRC:

Le code.js est notre nom de fichier javascript. Notre page Web ressemblera maintenant à ceci:

Laissez maintenant modifier les classes CSS en utilisant le liste de classe propriété. Comme vu précédemment, la propriété ClassList nous offre des méthodes intégrées que nous pouvons utiliser pour modifier les classes CSS. Nous utiliserons le liste de classe.ajouter() qui ajoutera une classe dans l'exemple suivant:

// sélectionnez le premier div
const Hidediv = document.queySelector ('div');
kidédiv.liste de classe.Add ('Hidden'); // classe cachée ajoutée

Ensuite, accédez au fichier CSS et initialisez la classe cachée en faisant l'affichage aucune afin que la div ne soit pas visible:

.caché
Affichage: aucun;

Vous verrez maintenant que l'élément div sera caché et que vous ne verrez rien sur votre page Web:

Laissez maintenant utiliser le liste de classe.remplacer() Méthode où nous remplacerons la classe cachée existante par un autre emballage de classe.

// sélectionnez le premier div
const Hidediv = document.queySelector ('div');
kidédiv.liste de classe.Add ('Hidden'); // classe cachée ajoutée
kidédiv.liste de classe.remplacer («caché», «envelopper»); // remplacer la classe cachée par une classe d'informations

Ensuite, accédez à votre fichier CSS et stylisez la classe de wrap:

.envelopper
taille de police: grand;

Vous verrez maintenant que notre contenu est désormais visible et que la taille de la police sera plus grande qu'auparavant:

Conclusion

JavaScript nous propose deux propriétés que nous pouvons utiliser pour modifier les classes CSS; liste de classe et nom du cours propriété. Le nom du cours la propriété est utilisée pour définir directement une valeur sur une classe CSS liste de classe nous donne quelques méthodes intégrées pour manipuler les classes CSS.

Par exemple, le liste de classe.ajouter() nous donne la possibilité d'ajouter des valeurs de classe, liste de classe.retirer() nous donne la possibilité de supprimer une classe, liste de classe.basculer() nous donne la possibilité d'ajouter un randonnée à une classe et le liste de classe.remplacer() nous donne la possibilité de remplacer une valeur de classe par une autre classe.

Dans cet article, nous avons vu comment modifier les classes CSS en utilisant JavaScript en apprenant deux propriétés de JavaScript; liste de classe et nom du cours.