CSSStyleSheet 对象（css 样式表）- 你不知道的有趣功能

最新推荐文章于 2024-03-05 13:48:53 发布

莫道开发

最新推荐文章于 2024-03-05 13:48:53 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_43856422/article/details/127903400

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.概念

CSSStyleSheet 对象代表着，css文件被浏览器解析后生成的css样式表。

CSS 样式表由 CSS 规则组成，可以通过 CSSRule 对象操作每条规则。CSSStyleSheet 对象允许您查询、插入和删除样式表规则。

例如：好玩儿的尝试（改变页面样式的显示）

1.初始页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-21io3BKv-1668666664808)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9ccfa05598c4bbd993f12454917e80b~tplv-k3u1fbpfcp-watermark.image?)]

2.设置disabled=true时候的页面

document.styleSheets[0].disabled = true, 此时你会发现基本样式被关闭了

因为页面样式此时被关闭了，浏览器暂时不执行这个css了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6vypll6n-1668666664809)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff527ace224448fca1b08dc2820c752b~tplv-k3u1fbpfcp-watermark.image?)]

CSSStyleRule 对象的属性

cssRules

以数组的形式返回样式表中所有 CSS 规则。

disabled

该属性指示是否已应用当前样式表。如果为 true，样式表被关闭，且不能应用于文档。如果为 false，样式表打开并且可以应用于文档。

href

返回样式表的位置（URL），如果是内联样式表，则为 null。

media

规定样式信息预期的目标媒介。

ownerNode

返回将该样式表与文档相关联的节点。

ownerRule

如果该样式表来自 @import 规则，ownerRule 属性将包含 CSSImportRule。

parentStyleSheet

返回包含该样式表的样式表（如果有的话）。

title

返回当前样式表的标题。标题可以通过引用该样式表的

type

规定该样式表的样式表语言。以 MIME 类型表示，CSS 样式表的类型为 “text/css”。

CSSStyleRule 对象方法

方法	描述
addRule()	为一个样式表添加一条规则的特定于 IE 的方法。
deleteRule()	从指定位置删除规则的 DOM 标准方法。
insertRule()	向样式表中插入一条新规则的 DOM 标准方法。
removeRule()	删除一条规则的特定于 IE 的方法。