DOM系列：动态添加CSS样式规则

最新推荐文章于 2024-05-13 10:23:09 发布

W3cplus_

最新推荐文章于 2024-05-13 10:23:09 发布

阅读量4.2k

点赞数 1

文章标签： css js javascript java vue

本文链接：https://blog.csdn.net/tja8N2m2G46OMtF/article/details/80823496

版权

在上一节中学习了如何通过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样式常见的方式主要有三种：

在元素行内添加样式
<style>标签内部的样式
<link>标签引入的外部样式

在使用<style>和<link>添加样式时，可以在HTML标签中在对应的标签上添加ID属性，然后直接通过这个DOM元素的sheet属性就可以取得CSSStyleSheet对象。样式表也可以通过document.styleSheets遍历到：

let sheets = document.styleSheets;

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

StyleSheet接口

StyleSheet接口代表网页的一张样式表，包括<link>元素加载的样式表和<style>元素内嵌的样式表。

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

let sheets = document.styleSheets;
for (let i = 0; i < sheets.length; i++) {
    console.log(sheets[i])
}

如果是<style>元素嵌入的样式表，还有另一种获取StyleSheet实例的方法，就是这个节点元素的sheet属性。

// HTML 代码为 
<style id="myStyle"></style>

var myStyleSheet = document.getElementById('myStyle').sheet;
myStyleSheet instanceof StyleSheet // true

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

`StyleSheet.disabled`

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

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>StyleSheet</title>
        <style id="style">
            #box {                
                background-color: red !important;
            }
        </style>
    </head>

    <body>

        <div id="box" style="width: 100px; height: 100px;background-color: green;"></div>
        <button id="btn">修改颜色</button>

        <script>
            let sheets = doc