Comment ajouter CSS avec JavaScript

Il existe divers scénarios lorsque les programmeurs doivent coiffer la page en utilisant JavaScript. Par exemple, la modification dynamique du style des éléments sur les interactions utilisateur, notamment en montrant différentes animations ou styles sur la mise au point ou planer sur n'importe quel texte, etc. Pour le style dynamique, l'utilisation du style CSS en JavaScript est plus efficace. Il fournit 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 CSS avec JavaScript?

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

• la propriété de style comme style en ligne
• Méthode setAttribute () comme style en ligne
• Méthode CreateElement () en tant que style global

Méthode 1: Ajouter CSS avec JavaScript en utilisant la propriété «style»

Pour ajouter 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 individuel.

Syntaxe
Pour ajouter le 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 ID, ce qui aide à accéder aux éléments de bouton pour le style:

Accepter
Rejeter
Accepter

Avant de styliser, la sortie ressemblera à ceci:

Maintenant, stylissons ces boutons en javascript en utilisant le «style" propriété. Tout d'abord, obtenez tous les éléments de bouton en utilisant leurs ID assignés à l'aide du «getElementByid ()" méthode:

Laisser accepter = documenter.getElementById ("btn1");
Soit rejeter = document.getElementById ("btn2");
Laissez accepter = documenter.getElementById ("btn3");

Définissez les couleurs d'arrière-plan de tous ces boutons en utilisant le «style" propriété:

accepter.style.backgroundColor = "green";
rejeter.style.backgroundColor = "Red";
accepter.style.BackgroundColor = "Yellow";

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

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

Pour ajouter le 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 des boutons en JavaScript en utilisant le «setAttribute ()" méthode. Réglez le rayon de bordure de tous les boutons sur «.5rem», Et la couleur du texte du«Accepter" et "Rejeter"Boutons à"blanc".

accepter.SetAttribute ("style", "Color en arrière-plan: vert; couleur: blanc; frontière radius: .5rem; ");
rejeter.setAttribute ("style", "Color en arrière-plan: rouge; couleur: blanc; border-radius: .5rem; ");
accepter.SetAttribute ("style", "Color en arrière-plan: jaune; Border-Radius: .5rem; ");

Sortir

Méthode 3: Ajouter CSS avec JavaScript en utilisant 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 "CreateElement ()" 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 en 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 «CreateElement ()" méthode:

document.CreateElement (élémentType);

Pour ajouter le style CSS en JavaScript, utilisez la syntaxe donnée:

const style = document.CreateElement («style»);

Puis ajoutez l'élément de style dans la balise de tête à l'aide de la syntaxe ci-dessous:

document.diriger.APPEDCHILD (style);

Ici, "style"Est une référence à l'élément de style nouvellement créé, et"document.diriger«Est l'élément de tête du document HTML.

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

var style = document.CreateElement («style»);

Maintenant, créez un «btn"Classe pour appliquer le même style sur tous les boutons et ID"btn1","btn2" et "BTN3«Pour le style de bouton individuel:

style.innerhtml = '
.btn
taille de police: 1.1rem;
rembourrage: 3px;
marge: 2px;
Font-Family: Sans-Serif;
Border-Radius: .5rem;

# btn1
Color en arrière-plan: vert;
Couleur blanche;

# btn2
Color d'arrière-plan: rouge;
Couleur blanche;

# btn3
Color d'arrière-plan: jaune;

';;

Maintenant, ajoutez l'élément de style à la tête du document en passant en tant que paramètre au «APPENDCHILD ()" méthode:

document.diriger.APPEDCHILD (style);

Sortir

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

Conclusion

Pour ajouter CSS avec JavaScript, utilisez le style en ligne, y compris le «style«Propriété, et«setAttribute ()«Méthode, ou le style global en utilisant le«CreateElement ()" méthode. Le style global est plus efficace tandis qu'une méthode en ligne n'est pas recommandée car il est difficile de maintenir les styles d'application et peut conduire à la répétition du code. Cet article a décrit les méthodes pour ajouter CSS avec JavaScript.