脚本化样式表

我们经常使用JS操作单个元素的CSS样式与类名,但用JS操作样式表也是有可能的,虽然不经常这么做,但偶尔却非常有用。

参考书籍:JavaScript: The Definitive Guide

作者 Twitter:David Flanagan,个人主页( hacked,暂时无法访问):davidflanagan.com

可以通过两种方式获取得样式表,第一种方式:向<link>或者<style>元素添加id之类的钩子( hook ),然后通过document.getElementById()等方法来选择他们;第二种方式:通过document.styleSheets属性来获取一个只读的类数组对象,他包含CSSStylesheet对象,表示与文档关联在一起的样式表。

开启与关闭样式表

最简单的样式表操作也是最可靠与健壮的。<link><style>元素和 CSSStyleSheet对象对定义了一个在 JavaScript 中可以设置和查询的disabled属性,如果disabled属性为true,样式表就被浏览器关闭并忽略。使用如下代码片段:

查询、插入与删除样式表

我想,这是脚体化样式表最有用的地方了,比如允许用户完全控制页面上的样式(自定义主题)。CSSStyleSheet 定义了查询,插入和删除样式表规则的 API,IE8 及更早版本则有所不同。

document.styleSheets[]数组的元素是 CSSStyleSheet 对象。CSSStyleSheet 对象有一个cssRules[]数据,它包含样式表的所有规则:

IE 使用不同的属性名rules代替cssRulescssRules[]rules[]数组的元素为 CSSRule 对象。在标准 API 中,CSSRules 对象代表所有 CSS 规则,包含如@import@page等指令。但是,在 IE 中,rules[]数组只包含样式表中实际存在的样式规则。

CSSRule 对象有两个属性可以很便捷的使用。selectorText是规则的 CSS 选择器,也就是俗称的样式类名,而cssText是获得整个样式的文本表示形式。

标准的 API 定义了insertRule()deleteRule()方法来添加和删除规则:

IE8 及以下只支持以下方法,addRule()removeRule(),IE9 及以上同时支持两种类型的方法。
addRule()的使用方法略有不同,选择器与样式分开:

具体应用

通过操作 CSSStyleSheet 对象来改变样式,最大的优势在于可以与 DOM 分开,如果在样式表加载之后及 DOM 加载之前对样式进行修改,可以避免用户看到整个过程(常规方法 DOM 加载后,再改变 DOM 样式),用于定制主题等需要动态改变样式的地方是很有优势的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注