php动态添加js和css样式,DOM系列：动态添加CSS样式规则

在上一节中学习了如何通过JavaScript来修改CSS样式。简单地说：查询CSS样式(即计算样式)，设置单个样式(设置的是行内样式)，设置多个样式(通过类来设置样式)。即：

通过DOM Element对象的getAttribute()、setAttribute()和removeAttribute()等方法修改元素的style属性

通过对元素节点的style来读写行内CSS样式

通过style对象的cssText属性来修改全部的style属性

通过style对象的setProperty()、getPropertyValue()、removeProperty()等方法来读写行内CSS样式

通过window.getComputedStyle()方法获得浏览器最终计算的样式规则

通过className或classList给元素添加或删除类名，配合样式文件来修改元素样式

可以说上面这些都是通过DOM元素来增、删、改、查CSS样式。事实上我们还可以通过脚本化CSS这种技术来控制样式。这种方式，可以让我们的页面更加的快速和高效。那就是直接通过JavaScript动态地添加和删除样式表中的某些样式，用来取代不断地查询DOM元素，并应用各种样式。接下来咱们就来学习脚本化样式表相关的知识。

获取样式表

你可以选择任意的样式表来添加样式规则。众所周知，引用CSS样式常见的方式主要有三种：

在元素行内添加样式

标签引入的外部样式

在使用

let sheets = document.styleSheets;

CSSStyleSheet类型表示的是样式表，其也是一个对象，而且是一个类数组对象，它继承自StyleSheet。

StyleSheet接口

StyleSheet接口代表网页的一张样式表，包括元素加载的样式表和

document对象的styleSheets属性，可以返回当前页面的所有StyleSheet实例 —— 所有样式表。它是一个类似数组的对象。

let sheets = document.styleSheets;

for (let i = 0; i < sheets.length; i++) {

console.log(sheets[i])

}

如果是

// HTML 代码为

var myStyleSheet = document.getElementById('myStyle').sheet;

myStyleSheet instanceof StyleSheet // true

前面也提到过了document对象的styleSheets属性，可以返回当前页面的所有StyleSheet实例。StyleSheet实例有以下属性。

StyleSheet.disabled

StyleSheet.disabled返回一个布尔值，表示该样式表是否处于禁用状态。手动设置disabled属性为true，等同于在元素里面，将这张样式表设为alternate stylesheet，即该样式表将不会生效。

StyleSheet

#box {

background-color: red !important;

}

修改颜色

let sheets = document.styleSheets

let btn = document.getElementById('btn')

btn.addEventListener('click', function(){