Comment styliser CSS via JavaScript

Dans le développement Web, la définition de styles CSS est une opération très courante. JavaScript peut définir des styles CSS via des opérations DOM. Cet article explique comment définir les styles CSS via JavaScript.

1. Obtenez l'élément et définissez le style

Pour définir le style CSS via JavaScript, vous devez d'abord obtenir le style de l'élément. Il existe de nombreuses façons de l'obtenir. En prenant comme exemple l'élément avec l'ID "demo", vous pouvez utiliser le code suivant :

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

Après avoir obtenu l'élément, vous pouvez définir son style CSS via l'attribut style de l'élément. Par exemple, pour définir la couleur d'arrière-plan d'un élément sur rouge, vous pouvez utiliser le code suivant :

demo.style.backgroundColor = "red";

De même, vous pouvez utiliser l'attribut style pour définir la taille, la bordure, la police, la couleur du texte, etc. Il vous suffit de convertir le nom de l'attribut de style CSS en nom camelCase et d'attribuer la valeur de l'attribut à l'attribut de style. Par exemple, pour définir la largeur de la bordure d'un élément sur 1 pixel et la couleur de la bordure sur bleu, vous pouvez utiliser le code suivant :

demo.style.borderWidth = "1px";
demo.style.borderColor = "blue";

2. Utilisez l'objet classList pour définir le style

En plus d'utiliser l'attribut style de l'élément pour définir le style CSS, vous pouvez également utiliser l'objet classList pour définir le style. L'objet classList fournit des méthodes telles que l'ajout, la suppression et le basculement pour utiliser l'attribut de classe de l'élément afin d'obtenir des fonctions telles que l'ajout, la suppression et le changement de style.

Par exemple, pour ajouter une classe nommée "highlight" à un élément, vous pouvez utiliser le code suivant :

demo.classList.add("highlight");

Pour supprimer la classe nommée "highlight", vous pouvez utiliser le code suivant :

demo.classList.remove("highlight");

Pour changer de classe nommé "highlight", vous pouvez utiliser Le code suivant :

demo.classList.toggle("highlight");

3. Définir les styles via des objets CSSStyleSheet

En JavaScript, les feuilles de style CSS sont également représentées sous forme d'objets, à savoir des objets CSSStyleSheet. Les styles CSS peuvent également être définis via l'objet CSSStyleSheet. Pour définir le style via l'objet CSSStyleSheet, vous devez d'abord obtenir la feuille de style à utiliser. Il existe de nombreuses façons de l'obtenir. En prenant comme exemple la feuille de style avec l'ID "styleSheet", vous pouvez utiliser le code suivant :

var styleSheet = document.getElementById("styleSheet").sheet;

Après avoir obtenu la feuille de style, vous pouvez utiliser la méthode insertRule pour ajouter des règles de style au feuille de style. Par exemple, pour ajouter une nouvelle règle de style à la feuille de style pour rendre la couleur de fond de l'élément verte, vous pouvez utiliser le code suivant :

styleSheet.insertRule("#demo {background-color: green;}", 0);

Notez que le deuxième paramètre ici indique l'emplacement où la règle de style est insérée, 0 indique qu'il est inséré dans la feuille de style au début, -1 indique une insertion à la fin de la feuille de style.

En plus d'insérer des règles de style, l'objet CSSStyleSheet fournit également la méthode deleteRule pour supprimer les règles de style. Par exemple, pour supprimer la première règle de style dans la feuille de style, vous pouvez utiliser le code suivant :

styleSheet.deleteRule(0);

IV Résumé

Grâce à l'introduction ci-dessus, nous pouvons comprendre comment utiliser les styles CSS via JavaScript, y compris en utilisant l'attribut style. et classList d’éléments et objet CSSStyleSheet. Bien sûr, ce n'est que la pointe de l'iceberg en matière de style JavaScript. Il existe de nombreuses utilisations et techniques avancées que nous devons maîtriser et apprendre.

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!