Comment ajouter du CSS avec JavaScript

Il existe différents scénarios dans lesquels les programmeurs doivent styliser la page à l'aide de JavaScript. Par exemple, changer dynamiquement le style des éléments sur les interactions de l'utilisateur, y compris afficher différentes animations ou styles sur le focus ou survoler n'importe quel texte, etc. Pour le style dynamique, l'utilisation du style CSS dans JavaScript est plus efficace. Il offre un moyen flexible et dynamique de gérer les styles et de rendre les applications plus conviviales.

Cet article décrira les méthodes pour ajouter CSS avec JavaScript.

Comment ajouter du CSS avec JavaScript ?

En JavaScript, vous pouvez ajouter des styles CSS à un élément en modifiant sa propriété de style à l'aide des méthodes ou approches suivantes :

style Propriété en tant que style en ligne
Méthode setAttribute() comme style en ligne
Méthode createElement() en tant que style global

Méthode 1 : Ajouter du CSS avec JavaScript à l'aide de la propriété « style »

Pour ajouter du CSS en JavaScript, utilisez le ' style ' propriété. Il est utilisé pour accéder et manipuler les styles en ligne d'un élément. Il donne un objet qui représente les styles en ligne d'un élément et permet d'obtenir ou de définir des propriétés de style individuelles.

Syntaxe
Pour ajouter un style CSS en JavaScript, la syntaxe suivante est utilisée pour le ' style ' propriété:

élément. style ;

Ici, ' élément ” est une référence à un élément HTML.

Exemple
Dans l'exemple suivant, nous allons styliser les boutons en utilisant JavaScript. Tout d'abord, nous allons créer trois boutons et leur attribuer des identifiants, ce qui permet d'accéder aux éléments du bouton pour le style :

< identifiant du bouton = 'btn1' > Accepter bouton >
< identifiant du bouton = 'btn2' > Rejeter bouton >
< identifiant du bouton = 'btn3' > Accepter bouton >

Avant de styliser, la sortie ressemblera à ceci :

Maintenant, stylisons ces boutons en JavaScript en utilisant le ' style ' propriété. Tout d'abord, obtenez tous les éléments du bouton en utilisant leurs identifiants attribués à l'aide du ' getElementById() ' méthode:

être d'accord = document. getElementById ( 'btn1' ) ;
laisser rejeter = document. getElementById ( 'btn2' ) ;
laisser accepter = document. getElementById ( 'btn3' ) ;

Définissez les couleurs de fond de tous ces boutons à l'aide de la touche ' style ' propriété:

accepter. style . Couleur de l'arrière plan = 'vert' ;
rejeter. style . Couleur de l'arrière plan = 'rouge' ;
accepter. style . Couleur de l'arrière plan = 'jaune' ;

Comme vous pouvez le voir, les boutons ont été stylés avec succès en utilisant le ' style ' propriété:

Méthode 2 : Ajouter du CSS avec JavaScript à l'aide de la méthode « setAttribute() »

Pour ajouter un style CSS en JavaScript, utilisez le ' setAttribute() ' méthode. Il est utilisé pour définir ou ajouter un attribut et sa valeur à un élément HTML.

Syntaxe
La syntaxe suivante est utilisée pour le ' setAttribute() ' méthode:

élément. setAttribute ( attribut , valeur ) ;

Exemple
Ici, nous allons définir les différents styles sur les boutons en JavaScript à l'aide du ' setAttribute() ' méthode. Définissez le rayon de bordure de tous les boutons sur ' .5rem ', et la couleur du texte du ' Accepter ' et ' Rejeter ' boutons à ' blanc ”.

accepter. setAttribute ( 'style' , 'couleur de fond : vert ; couleur : blanc ; rayon de bordure : 0,5 rem ;' ) ;
rejeter. setAttribute ( 'style' , 'couleur de fond : rouge ; couleur : blanc ; rayon de bordure : 0,5 rem ;' ) ;
accepter. setAttribute ( 'style' , 'couleur de fond : jaune ; rayon de bordure : 0,5 rem ;' ) ;

Sortir

Méthode 3 : Ajouter du CSS avec JavaScript à l'aide de la méthode 'createElement()'

Si vous souhaitez créer des classes ou des identifiants dans le style JavaScript comme dans le style CSS, utilisez le ' créerÉlément() ' méthode. Il est utilisé pour créer dynamiquement un nouvel élément. Pour le style, créez un ' style ” élément utilisant cette méthode. Le ' createElement('style') ' La méthode JavaScript est utilisée pour créer dynamiquement un nouvel élément de style, qui peut être utilisé pour ajouter des styles CSS à une page Web.

Syntaxe
La syntaxe donnée est utilisée pour le ' créerÉlément() ' méthode:

document. créerÉlément ( typeélément ) ;

Pour ajouter un style CSS en JavaScript, utilisez la syntaxe indiquée :

constante style = document. créerÉlément ( 'style' ) ;

Ajoutez ensuite l'élément style dans la balise head en utilisant la syntaxe ci-dessous :

document. diriger . ajouterEnfant ( style ) ;

Ici, ' style ' est une référence à l'élément de style nouvellement créé, et ' document.head ” est l'élément principal du document HTML.

Exemple
Tout d'abord, créez un élément de style en utilisant le ' créerÉlément() ' méthode:

était style = document. créerÉlément ( 'style' ) ;

Maintenant, créez un ' btn ' classe pour appliquer le même style sur tous les boutons et identifiants ' btn1 ”, “ btn2 ' et ' btn3 ' pour un style de bouton individuel :

style. innerHTML = `
. btn {
Police de caractère - taille : 1.1rem ;
rembourrage : 3px ;
marge : 2px ;
Police de caractère - famille : sans - empattement ;
frontière - rayon : .5rem ;
}
#btn1 {
arrière-plan - couleur : vert ;
couleur : blanc ;
}
#btn2 {
arrière-plan - couleur : rouge ;
couleur : blanc ;
}
#btn3 {
arrière-plan - couleur : jaune ;
}
` ;

Maintenant, ajoutez l'élément de style à l'en-tête du document en le passant en paramètre au ' ajouterEnfant() ' méthode:

document. diriger . ajouterEnfant ( style ) ;

Sortir

Il s'agit d'ajouter du CSS dans JavaScript.

Conclusion

Pour ajouter du CSS avec JavaScript, utilisez le style en ligne, y compris le ' style ' Propriété, et ' setAttribute() ', ou le style global à l'aide de la méthode ' créerÉlément() ' méthode. Le style global est plus efficace tandis qu'une méthode en ligne n'est pas recommandée car elle rend difficile la maintenance des styles d'application et peut entraîner la répétition du code. Cet article décrit les méthodes pour ajouter CSS avec JavaScript.

Comment ajouter du CSS avec JavaScript