Comment modifier les propriétés CSS dans js

JavaScript (JS) est un langage de programmation utilisé pour concevoir des pages Web interactives et des sites Web dynamiques. JS peut accéder et exploiter les éléments des pages HTML via DOM (Document Object Model). Cet article explique principalement comment utiliser JS pour modifier les propriétés CSS.

1. Obtenez l'élément
Avant de modifier les propriétés CSS, vous devez obtenir l'élément sur lequel opérer. Vous pouvez obtenir un élément par son ID d'élément à l'aide de la méthode document.getElementById() ou par un sélecteur CSS à l'aide de la méthode document.querySelector().

Comme l'exemple suivant :
Code HTML :

<div id="myDiv">Hello World!</div>

Code JS :

var myDiv = document.getElementById("myDiv");

ou

var myDiv = document.querySelector("#myDiv");

Les deux lignes de code obtiendront l'élément div contenant le texte "Hello World!"

2. Modifier les propriétés CSS
Il existe deux façons de modifier les propriétés CSS : modifier le style directement via l'attribut style, ou modifier le style via l'attribut class.

1. Changez le style directement
   Vous pouvez utiliser l'attribut style de l'élément pour changer le style CSS. L'exemple suivant change la couleur d'arrière-plan en rouge :

   myDiv.style.backgroundColor = "red";

   Vous pouvez également modifier plusieurs styles en même temps :

   myDiv.style.backgroundColor = "red";
   myDiv.style.color = "white";

   .

2. En modifiant l'attribut de classe
   Les attributs peuvent prédéfinir plusieurs styles dans le fichier CSS, puis modifier le style dans JS via l'attribut de classe de l'élément. Prenons l'exemple suivant pour changer la couleur d'arrière-plan en bleu :
   Code CSS :

   .blue-background {
     background-color: blue;
   }

   Code JS :

   myDiv.className = "blue-background";

   Cela changera la couleur d'arrière-plan de l'élément div en bleu.

3. Modifications de style déclenchées par un événement
JS peut également déclencher des modifications de style après que l'utilisateur a effectué certaines opérations. Dans l'exemple suivant, lorsque la souris survole l'élément, la couleur du texte sera changée en vert :
Code HTML :

<div id="myDiv">Hello World!</div>

Code JS :

var myDiv = document.getElementById("myDiv");

myDiv.onmouseover = function() {
  myDiv.style.color = "green";
};

myDiv.onmouseout = function() {
  myDiv.style.color = "black";
};

Lorsque la souris survolera l'élément, la couleur du texte sera devient vert ; lorsque la souris est éloignée, la couleur du texte redevient noire.

Résumé :
En utilisant JS, vous pouvez facilement modifier le style des éléments HTML pour rendre le site Web plus dynamique et intéressant. En utilisant la méthode ci-dessus, vous pouvez utiliser JS de manière flexible pour modifier le style de conception du site Web afin de rendre la page plus diversifiée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!