Comment changer CSS avec JavaScript

La langue HTML est simplement un langage de balisage qui ne peut remplir aucune fonction et ne peut exécuter des codes basés sur divers événements dynamiques. À cette fin, nous devons utiliser JavaScript pour modifier le style CSS de n'importe quel élément HTML car HTML ne peut pas le faire seul.

Il peut y avoir diverses raisons pour lesquelles nous devons modifier CSS et manipuler avec des éléments HTML, il peut s'agir de charger la feuille de style dynamiquement, de modifier la couleur d'un bouton lorsqu'un utilisateur clique, ou d'écrire CSS dans JavaScript. Tous ces modifications peuvent être effectuées via JavaScript. Dans cet article, nous verrons diverses façons d'accéder à CSS avec JavaScript et de le changer.

Utilisation de JavaScript pour modifier CSS

Il existe différentes méthodes en JavaScript qui aident à accéder aux éléments HTML et à travers cela, nous pouvons manipuler les valeurs de CSS. Certaines de ces méthodes sont expliquées ci-dessous avec des exemples.

Utilisation de GetElementsByClassName ()

La méthode getElementByClassName () prend une chaîne comme nom de classe et recherche l'ensemble du document HTML et renvoie les éléments avec le même nom de classe. Une fois le nom de classe identifié, nous pouvons modifier les propriétés CSS comme indiqué ci-dessous dans l'exemple:

HTML:

Zone de saisie:


Changer la frontière

Javascript:

Ici, nous avons recherché l'élément HTML par ClassName et avons changé les propriétés CSS de ces éléments en utilisant style.Couleur de l'arrière plan et style.couleur de la bordure.

Sortir:

Utilisation de GetElementById ()

Une autre méthode à utiliser est getElementByid () qui recherche tous les éléments HTML avec des identifiants similaires et exécute la fonction attribuée sur eux. La plupart des divs divers sont utilisés qui sont attribués avec des ID et ces ID sont recherchés en utilisant cette méthode. Il s'agit des méthodes les plus utilisées par les développeurs, ci-dessous est un exemple:

HTML:

Zone de saisie:


Changer la frontière

Javascript:

Ici, nous avons utilisé la méthode pour rechercher tous les éléments en utilisant leur identifiant et modifié les propriétés CSS à l'aide du style.

Sortir:

Utilisation de QuerySelector ()

Une autre méthode qui fonctionne comme les deux méthodes ci-dessus est le QuerySelector () Méthode qui peut rechercher par nom de classe, nom d'identification et même par des balises HTML, mais il renvoie uniquement le premier élément HTML mentionné pour rechercher. Vous trouverez ci-dessous les moyens d'utiliser le QuerySelector:

document.queySelector ("# id de div");
document.queySelector (". Nom de la classe CSS ");
document.queySelector ("tag html comme: div>");

Vous trouverez ci-dessous un exemple de QueySelector () et comment il peut être utilisé avec le nom de la classe, IDS, etc

HTML:

Zone de saisie:


Changer la frontière

Javascript:

Ici, nous avons utilisé la méthode QueySelector () pour rechercher des classes et des identifiants de div, et changé leurs propriétés CSS.

Sortir:

Conclusion

Il existe diverses raisons de modifier le CSS, et la meilleure façon de le faire est d'utiliser JavaScript car il peut facilement accéder aux éléments de HTML et changer leurs propriétés CSS. Dans cet article, nous avons discuté de la façon de modifier CSS à l'aide de JavaScript, diverses méthodes fournies en JavaScript pour modifier les valeurs des éléments HTML. Ceux-ci facilitent le travail des développeurs et rendent la page Web plus dynamique. Grâce à ces méthodes, nous pouvons modifier les couleurs des bouton sur le clic, les couleurs d'arrière-plan, les couleurs de police, etc. facilement et manipuler davantage avec les propriétés CSS.