Comment définir le style en utilisant un javascript pur

Lorsque les développeurs doivent ajouter une animation ou modifier le style de tout élément en fonction des interactions utilisateur ou d'autres événements dynamiques sur la page Web, il peut être plus efficace d'utiliser JavaScript pour mettre à jour les styles plutôt que d'utiliser CSS. JavaScript peut créer des animations qui seraient difficiles ou impossibles à réaliser avec CSS seul.

Ce tutoriel décrira le processus de style de la page à l'aide de JavaScript.

Comment définir le style en utilisant un javascript pur?

Pour styliser une page Web à l'aide de JavaScript, utilisez les approches suivantes:

• Style en ligne
• Style global

Méthode 1: Set Style avec JavaScript en utilisant le style «en ligne»

Pour appliquer n'importe quel style sur un seul élément, utilisez les approches suivantes:

• attribut de style
• Méthode setAttribute ()

Exemple 1: style en ligne à l'aide d'attribut «style»

Tout d'abord, ajoutez du contenu sur la page:

Style-moi en utilisant le style en ligne en javascript

La page Web avant le style ressemble maintenant comme suit:

Maintenant, style le texte en utilisant JavaScript. Tout d'abord, obtenez la référence du texte où nous voulons ajouter du style en utilisant le «getElementByid ()" méthode:

Let Text = document.getElementById ("texte");

Changez la couleur du texte en utilisant le «style" attribut:

texte.style.color = "rouge";

Comme vous pouvez le voir que le texte est maintenant en rouge:

Exemple 2: style en ligne à l'aide de la méthode «setAttribute ()»

Ici, nous utiliserons le «setAttribute ()”Méthode où, nous changerons la couleur et la couleur d'arrière-plan du texte, et définirons le texte dans le style audacieux:

texte.setAttribute ("style", "fond de fond: gris; couleur: jaune; police: gras;");

On peut observer que la couleur, la couleur d'arrière-plan et le style de police ont été implémentés avec succès sur le texte:

Méthode 2: Set Style avec JavaScript en utilisant le style «global»

Si vous souhaitez ajouter le même style sur les différents éléments, utilisez le "style global»Technique. Il définit les styles sur plusieurs éléments à la fois en utilisant le «getElementsByClassName () "," GetElementsByTagName () ", ou" QuerySelectorall ()«Méthodes.

Exemple

Dans le fichier html, ajoutez du texte sur la page:

Style utilisant javascript

Style-moi en utilisant le style global en javascript

Style-moi en utilisant le style global en javascript

Contenu corporel

Sortir

Maintenant, style la page en utilisant l'approche de style globale. Tout d'abord, ajoutez un style pour la balise en utilisant le "QuerySelector ()" méthode. Ici, nous changerons la couleur d'arrière-plan, la famille des polices et la couleur du texte et définirons le rembourrage et la marge du corps sur «0» en utilisant le «style" attribut:

const Body = Document.queyselector ("corps");
corps.style.backgroundColor = "LightBlue";
corps.style.Fontfamily = "Arial, Sans-Serif";
corps.style.color = "blanc";
corps.style.margin = "0";
corps.style.padding = "0";

Comme vous pouvez le voir, tout le style donné a été mis en œuvre avec succès sur la page Web:

Maintenant, nous allons changer la couleur de la rubrique et le déplacer vers le bas en appliquant "margintop»:

const h4 = document.queySelector ("H4");
H4.style.color = "noir";
H4.style.margintop = "50px";

Vous pouvez voir que le titre se déplace un peu vers le bas, et la couleur est de changer pour «noir»:

Maintenant, modifiez la couleur du texte du texte spécifié qui contient le «texte«Classe en utilisant le«queySelectorall ()" méthode:

Laissez les éléments = document.queySelectorall ('.texte');
éléments.foreach (fonction (elem)
elem.style.color = "bleu";
);

Sortir

C'était tout au sujet du style en utilisant du javascript pur.

Conclusion

Pour styliser une page Web à l'aide de JavaScript, utilisez le «Style en ligne »ou« style global"Avec l'aide du"Attribut de style, «setAttribute ()" méthode, "getElementsByClassName ()","getElementsByTagName () "ou" QuerySelectorall ()«Méthodes. Le style en ligne est utilisé pour styliser un seul élément, tandis que plusieurs éléments utilisent l'approche de style globale pour le style. Ce tutoriel a décrit le processus de style de la page à l'aide de JavaScript.