Comment définir CSS en javascript

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 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 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 à c9ccee2e6ea535a969eb3f532ad9fe89 via innerHTML.

var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';

Enfin, nous injecterons les styles dans le DOM. Pour ce faire, nous obtiendrons la première balise de script que nous trouverons dans le DOM et utiliserons insertBefore() pour ajouter notre balise de style.

// 创建我们的样式表
var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';
// 获取第一个脚本标记
var ref = document.querySelector('script');
// 在第一个脚本标签之前插入新样式
ref.parentNode.insertBefore(style, ref);

3. Utilisez JavaScript pour ajouter et supprimer des classes : add() et remove() [Apprentissage recommandé : Tutoriel avancé javascript]

Cette méthode implique l'ajout et la suppression de valeurs de classe, ce qui à son tour modifie les règles de style appliquées. Par exemple, disons que nous avons une règle de style comme celle-ci :

.disableMenu {
    display: none;
}

En HTML, vous avez un menu avec l'identifiant dropDown :

<ul id="dropDown">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Maintenant, si nous voulons modifier la règle de style .disableMenu appliquée à cet élément, tout ce que nous avons à faire est d'ajouter DisableMenu comme valeur de classe à l'élément dropDown :

<ul class="disableMenu" id="dropDown">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

Pour obtenir le même résultat en utilisant JavaScript, nous utiliserons l'API classList. Cette API rend très simple l'ajout ou la suppression de valeurs de classe des éléments HTML.

Pour ajouter le nom de la classe DisableMenu à notre élément dropDown, utilisez la méthode add() sur l'attribut classList de l'élément HTML :

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.add("disableMenu");

Pour supprimer le nom de la classe DisableMenu, nous pouvons appeler le Méthode Remove() de l'API classList :

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.remove("disableMenu");

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!