js modifie dynamiquement le CSS

Avec le développement continu de la technologie front-end, JavaScript est devenu un élément indispensable du développement Web. En JavaScript, la modification dynamique des styles CSS est l'une des exigences courantes. Elle peut obtenir de nombreux effets intéressants, tels que des effets spéciaux lorsque la souris survole et la couleur de la barre de navigation change lorsque la page défile. Cet article présentera en détail comment modifier dynamiquement les styles CSS en JavaScript.

1. Utilisez JavaScript pour modifier le style des éléments

En HTML, nous pouvons embellir la page en ajoutant des styles CSS aux éléments. En JavaScript, l'effet de modification dynamique des styles peut être obtenu en modifiant les attributs des éléments.

1. Utilisez l'attribut style de l'élément

Nous pouvons utiliser l'attribut style de l'élément HTML pour modifier directement le style de l'élément. Cette méthode convient pour modifier le style d’un seul élément.

Exemple de code :

<div id="box" style="background-color: green;">我是一段文本</div>

En JavaScript, vous pouvez modifier dynamiquement le style d'un élément en obtenant son attribut de style :

var box = document.querySelector('#box');
box.style.backgroundColor = 'red';

Après avoir modifié son style via JavaScript, le style de l'élément deviendra rouge.

2. Utiliser l'élément de style de l'élément

Une autre façon de modifier dynamiquement le style d'un élément consiste à utiliser l'élément de style de l'élément. L'élément style permet d'accéder directement à la feuille de style de l'élément en JavaScript et de modifier son style.

Exemple de code :

<div id="box"></div>

<style>
    #box {
        background-color: green;
    }
</style>

En JavaScript, vous pouvez obtenir l'élément de style d'un élément en obtenant son attribut de style, puis modifier dynamiquement son style :

var box = document.querySelector('#box');
var styles = box.style;

// 修改样式
styles.backgroundColor = 'red';

Après avoir modifié son style via JavaScript, le style de l'élément deviendra rouge.

2. Utilisez classList pour modifier le style

Les deux méthodes présentées ci-dessus conviennent pour modifier le style d'un seul élément à volonté, alors ces deux méthodes sont les suivantes. trop gênant. À ce stade, nous pouvons utiliser l'attribut classList pour modifier dynamiquement le style.

1. Ajouter et supprimer des classes

L'attribut classList contient de nombreuses méthodes pratiques qui nous permettent d'ajouter et de supprimer facilement des classes. Avec les classes, nous pouvons définir un ensemble de styles pour un élément et les ajouter ou les supprimer dynamiquement via JavaScript.

Exemple de code :

<div class="box">我是一段文本</div>

En JavaScript, vous pouvez ajouter ou supprimer des classes d'éléments via les méthodes add() et remove() de classList :

var box = document.querySelector('.box');
box.classList.add('red');
box.classList.remove('box');

Après avoir modifié son style via JavaScript, le style de l'élément deviendra rouge, et la classe box de l'élément sera supprimée.

2. Switch class

En plus des méthodes add() et remove(), classList dispose également d'une méthode pratique appelée toggle(). La méthode toggle() peut changer la classe de l'élément. Si la classe existe déjà dans l'élément, la méthode supprimera la classe, sinon elle ajoutera la classe.

Exemple de code :

<div class="box">我是一段文本</div>

En JavaScript, vous pouvez changer la classe d'un élément via la méthode toggle() de classList :

var box = document.querySelector('.box');
box.classList.toggle('red');
box.classList.toggle('green');

Après avoir modifié son style via JavaScript, le style de l'élément passera du rouge au vert.

3. Modifier directement la feuille de style

La méthode ci-dessus peut contrôler le style d'un seul élément ou de plusieurs éléments, mais si vous devez modifier directement la feuille de style, vous devez utiliser une méthode différente.

En JavaScript, une feuille de style est représentée comme un objet et nous pouvons modifier dynamiquement les styles qu'elle contient via le code JavaScript pour obtenir une modification dynamique de la feuille de style.

Exemple de code :

<div class="box">我是一段文本</div>

En JavaScript, vous pouvez modifier dynamiquement son style en récupérant l'objet correspondant à la feuille de style :

var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules;

for (var i = 0; i < rules.length; i++) {
    var rule = rules[i];
    if (rule.selectorText === '.box') {
        rule.style.backgroundColor = 'red';
    }
}

Après avoir modifié son style via JavaScript, le style de l'élément deviendra rouge.

4. Résumé

Cet article présente trois méthodes de modification dynamique des styles CSS, notamment l'utilisation de l'attribut style de l'élément, l'utilisation de l'élément style de l'élément et l'utilisation de classList. De plus, afin de répondre au besoin de modifier directement la feuille de style, nous avons également introduit la méthode de modification directe de la feuille de style. Ces méthodes nous permettent d'implémenter facilement la fonction de modification dynamique des styles CSS en JavaScript.

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!