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

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

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

  • 通过DOM Element对象的getAttribute()setAttribute()removeAttribute()等方法修改元素的style属性
  • 通过对元素节点的style来读写行内CSS样式
  • 通过style对象的cssText属性来修改全部的style属性
  • 通过style对象的setProperty()getPropertyValue()removeProperty()等方法来读写行内CSS样式
  • 通过window.getComputedStyle()方法获得浏览器最终计算的样式规则
  • 通过classNameclassList给元素添加或删除类名,配合样式文件来修改元素样式

可以说上面这些都是通过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 = document.styleSheets
            let btn = document.getElementById('btn')

            btn.addEventListener('click', function(){
                sheets[0].disabled = !sheets[0].disabled
            })
        </script>
    </body>

</html>

当你单击“修改颜色”按钮时,可以看到idstyle<style>中样式并没生效;只有再次点击时才将生效。

注意,disabled是一个可读,可写的的属性,该属性只能通过JavaScript设置,不能在HTML语句中设置。

StyleSheet.href

StyleSheet.href返回样式表的网址。对于内嵌样式表,该属性返回null。该属性是一个只读属性。

let sheets = document.styleSheets;

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

StyleSheet.media

StyleSheet.media属性返回一个类似数组的对象:MediaList实例,表示适用媒介的字符串。表示当前样式表是用于屏幕screen,还是打印设备print或手持设备handheld,或各种媒介适用all。该属性只读,默认值是screen

当你想在屏幕上显示的时候,你肯定不能把CSS规则加到打印样式表中。你可以仔细的看一下CSSStyleSheet对象的属性信息:

比如下面这样,咱们可以打印出一个页面中所有样式表对应的媒介:

let sheets = document.styleSheets;

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

MediaList实例的

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/add-rules-stylesheets.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部