Comment définir le style CSS dans js ? Comment modifier le style CSS avec js

Comment définir le style CSS dans js ? Cet article vous présentera comment définir (modifier) ​​les styles CSS avec js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Nous allons maintenant vous présenter comment définir le style CSS à l'aide de javascript.

1. Définir le style directement (style en ligne)

Le moyen le plus simple de définir le style d'un élément à l'aide de JavaScript est d'utiliser le attribut de style. Il existe un objet de style pour chaque élément HTML auquel nous accédons via JavaScript. Cet objet nous permet de spécifier les propriétés CSS et de définir leurs valeurs. Par exemple, voici le style permettant de définir la couleur de la police, la couleur d'arrière-plan et le style de l'élément HTML avec la valeur id demo :

var myElement = document.querySelector("#demo");

// 把颜色设置成紫色
elem.style.color = 'purple';  

// 将背景颜色设置为浅灰色
elem.style.backgroundColor = '#e5e5e5';  

// 将高度设置为150 px
elem.style.height = '150px';

Remarque : JavaScript utilise la casse chameau principe (par exemple : backgroundColor) à la place Les tirets (background-color) représentent les noms d'attributs

L'attribut style ajoute des styles en ligne sur l'élément :

<div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;">     
     Hello, world! 
</div>

Cependant, cela peut rendre notre balisage très déroutant. Les performances de rendu du navigateur sont également médiocres.

2. Ajouter un style global

Une autre méthode consiste à ajouter Injecter éléments avec des attributs CSS dans le DOM. Ceci est utile lors de la définition de styles qui s’appliquent à un groupe d’éléments plutôt qu’à un seul.

Tout d'abord, nous allons créer un élément de style.

var style = document.createElement('style');

Ensuite, nous ajouterons notre style à