Comment définir le CSS avec JavaScript : 1. Définissez l'objet de style directement via le style en ligne ; 2. Définissez l'attribut de style en ajoutant un style global ; 3. Utilisez JavaScript pour ajouter et supprimer des classes "add()" et "remove( )" définit le CSS.
L'environnement d'exploitation de cet article : système Windows7, version javascript1.8.5&&HTML5&&CSS3, ordinateur Dell G3.
Javascript définit le style CSS
1. Définissez directement l'objet de style (style en ligne)
Le moyen le plus simple de définir le style d'un élément à l'aide de JavaScript est de utilisez l'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 pour définir la couleur de police et la couleur d'arrière-plan 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 le principe de la casse chameau (par exemple : backgroundColor) au lieu du tiret ( background-color) Représentant le nom de l'attribut
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. Définissez l'attribut style - ajoutez un style global
Une autre méthode consiste à injecter des éléments avec des attributs CSS dans 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 à