Comment modifier le CSS en javascript

Dans le développement Web, nous devons souvent modifier les styles CSS via JavaScript et modifier dynamiquement les styles d'éléments dans les pages Web pour obtenir une meilleure expérience d'interaction utilisateur. Cet article présentera comment JavaScript peut modifier le CSS, y compris les aspects suivants :

1. Modifier le style de l'élément
2. Ajouter dynamiquement une feuille de style
3. Obtenir le style calculé
4. Modifier le nom de la classe

1. Modifier le style de l'élément

Pour modifier le élément Style, nous pouvons y parvenir grâce à l'attribut style de JavaScript. L'attribut style représente le style en ligne de l'élément, et le style de l'élément peut être directement modifié via cet attribut. Par exemple, nous pouvons définir la couleur d'arrière-plan d'un élément div sur rouge via le code suivant :

var divElement = document.getElementById("example");
divElement.style.backgroundColor = "red";

Ici, nous utilisons la fonction getElementById pour obtenir l'élément div avec l'exemple id, puis utilisons l'attribut style pour définir son arrière-plan. couleur.

En plus de backgroundColor, nous pouvons également définir de nombreux autres styles d'éléments via l'attribut style, tels que la couleur, la police, le remplissage, etc. Le format de syntaxe spécifique est :

element.style.property = value;

Parmi eux, la propriété est le nom de l'attribut de style, et value est la valeur de l'attribut. Par exemple :

divElement.style.color = "blue";
divElement.style.fontSize = "20px";
divElement.style.padding = "10px";

2. Ajouter dynamiquement des feuilles de style

Parfois, nous devons ajouter dynamiquement de nouvelles feuilles de style aux pages Web pour obtenir un contrôle de style plus flexible. À l’heure actuelle, nous pouvons utiliser les fonctions createElement et appendChild de JavaScript pour ajouter dynamiquement des feuilles de style.

Les étapes spécifiques sont les suivantes :

1. Créez un élément de lien.

var linkElement = document.createElement("link");

2. Définissez les attributs rel, type et href de l'élément link, où :

• l'attribut rel représente le type de feuille de style, généralement défini sur feuille de style. L'attribut
• type indique le type de fichier de feuille de style, généralement défini sur text/css. L'attribut
• href représente le chemin du fichier de la feuille de style, qui peut être un chemin relatif ou un chemin absolu.

linkElement.rel = "stylesheet";
linkElement.type = "text/css";
linkElement.href = "style.css";

3. Ajoutez l'élément link à l'élément head.

var headElement = document.getElementsByTagName("head")[0];
headElement.appendChild(linkElement);

De cette façon, la feuille de style est ajoutée avec succès à la page Web. Il convient de noter qu'avant d'ajouter une feuille de style, nous devons nous assurer que le fichier de feuille de style a été chargé. Sinon, le style risque de ne pas prendre effet.

3. Obtenir le style calculé

Parfois, nous devons obtenir le style calculé d'un élément, c'est-à-dire le style final après avoir appliqué toutes les règles de style à l'élément. Par exemple, si nous avons besoin d'obtenir la couleur d'arrière-plan calculée d'un certain élément div, nous pouvons utiliser la fonction getComputedStyle de JavaScript pour y parvenir.

Les étapes spécifiques sont les suivantes :

1. Récupérez l'objet élément.

var divElement = document.getElementById("example");

2. Utilisez la fonction getComputedStyle pour obtenir le style calculé.

var computedStyle = window.getComputedStyle(divElement);

3. Obtenez la valeur de l'attribut de style calculée.

var backgroundColor = computedStyle.backgroundColor;

Il convient de noter ici que la fonction getComputedStyle renvoie un objet CSSStyleDeclaration, qui contient tous les styles calculés de l'élément. Si vous souhaitez obtenir la valeur d'un certain attribut, vous devez utiliser l'attribut correspondant de l'objet. Par exemple, ComputedStyle.backgroundColor représente la couleur d'arrière-plan calculée de l'élément.

4. Modifier le nom de la classe

Parfois, nous devons changer le style de l'élément en modifiant le nom de la classe. Par exemple, nous devons changer la couleur d'arrière-plan d'un élément div en cliquant sur un bouton, ce qui peut être réalisé en modifiant l'attribut class de l'élément.

Les étapes spécifiques sont les suivantes :

1. Créez un élément bouton.

var buttonElement = document.createElement("button");
buttonElement.textContent = "切换背景色";

2. Ajoutez un gestionnaire d'événements de clic à l'élément bouton.

buttonElement.addEventListener("click", function() {
  var divElement = document.getElementById("example");
  divElement.classList.toggle("highlight");
});

Ici, nous avons ajouté une fonction de gestionnaire d'événements de clic, qui utilise l'attribut classList pour modifier l'attribut class de l'élément. Nous utilisons la fonction bascule pour indiquer si l'élément contient le nom de la classe de surbrillance. Si l'élément ne contient pas à l'origine le nom de la classe de surbrillance, ajoutez le nom de la classe ;

3. Ajoutez des éléments de bouton aux pages Web.

document.body.appendChild(buttonElement);

De cette façon, vous pouvez changer dynamiquement la couleur d'arrière-plan de l'élément div en cliquant sur le bouton.

Résumé :

La fonction de contrôle de style de JavaScript nous offre une multitude de méthodes de contrôle de style de page Web. En maîtrisant les techniques présentées ci-dessus, nous pouvons obtenir un effet de style de page Web plus flexible et interactif. Dans le même temps, le contrôle du style est également l'une des compétences essentielles pour le développement Web front-end. J'espère que cet article pourra être utile aux lecteurs.

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!