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 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 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 à 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. Ajouter et supprimer des classes à l'aide de JavaScript : add() et Remove()

Cette méthode implique l'ajout et la suppression de classes valeur, ce qui modifie à son tour 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 La règle de style .disableMenu est 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 DisableMenu Pour le nom de la classe, nous pouvons appeler la méthode remove() de l'API classList :

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

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. à modifier selon la situation. J'espère que cela sera utile à l'apprentissage de tout le monde. D'autres didacticiels vidéo connexes sont recommandés : Tutoriel 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!