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

328 阅读1分钟

1.概念

CSSStyleSheet 对象 代表着,css文件被浏览器解析后生成的css样式表。
CSS 样式表由 CSS 规则组成,可以通过 CSSRule 对象操作每条规则。CSSStyleSheet 对象允许您查询、插入和删除样式表规则。

例如:好玩儿的尝试(改变页面样式的显示)

1.初始页面

image.png

2.设置disabled=true时候的页面
document.styleSheets[0].disabled = true, 此时你会发现基本样式被关闭了
因为页面样式此时被关闭了,浏览器暂时不执行这个css了。

image.png

CSSStyleRule 对象的属性

cssRules

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

disabled

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

href

返回样式表的位置(URL),如果是内联样式表,则为 null。

media

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

ownerNode

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

ownerRule

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

parentStyleSheet

返回包含该样式表的样式表(如果有的话)。

title

返回当前样式表的标题。标题可以通过引用该样式表的 或 元素的 title 属性来指定。

type

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

CSSStyleRule 对象方法

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