Javascript高级编程学习笔记（51）—— DOM2和DOM3（3）操作样式表

操作样式表

在JS中样式表用一种类型来表示，以便我们在JS对其进行操作

这一类型就是CSSStyleSheet 即CSS样式表类型，包括了之前 style 对象所不包括的外部样式表以及嵌入样式表

其中<link>以HTMLLinkElement 类型表示

而<style> 以HTMLStyleELement类型表示

但是这两类样式表更加通用的类型则是继承自 StyleSheet 类型的 CSSStyleSheet

其中继承自 StyleSheet 类型的有以下属性：

disabled：表示样式表是否被禁用，该属性可写

href：若是通过<link>引入的样式表，该属性的值则为样式表的 URL 否则为 null

media：当前样式表支持的媒体集合类型，若该集合为空列表则表示样式表适用于所有媒体

ownerNode：指向拥有当前样式表的节点的指针，若样式表通过 @import 导入则该属性的值为 null

扫描二维码关注公众号，回复： 5141585 查看本文章

parentStyleSheet：若当前样式表通过 @import 引入则指向引入它的样式表

title：ownerNode中的title属性的值

type：表示样式表类型的字符串，如“type/css”

cssRules：样式表中包含样式规则的集合

ownerRule：若通过@imoprt 引入则指向导入的规则

deleteRule（index）：删除cssRules中指定位置的规则

insertRule（rule，index）：向cssRules指定位置插入规则

至于每个文档的StyleSheet类型则可以通过以下代码访问

document.styleSheets[i]

每个styleSheet类型则都拥有以上的属性和方法

CSS规则

CSSRule 对象表示样式表中的每一条规则

CSSRule 是一个供其它多种类型继承的基类，其中CSSStyleRule就继承自该基类，用于表示样式表信息

CSSStyleRule拥有以下属性：

cssText：返回整条规则的对应文本
parentRuel：如果当前规则是导入的规则，则这个属性就是导入的规则，否则为null
parentStyleSheet：当前规则所属样式表
selectorText：返回当前规则的选择符文本
style：一个CSSStyleDeclaration 对象，可以通过该对象修改设置和取得规则中的值
type：表示规则类型的常量值，对于CSS规则来说该值为1

PS. 这里的cssText属性与style对象的cssText存在差异，也就是这里的cssText不能进行写操作，而style对象的cssText可以被重写

这里和style对象的区别在于，style修改的样式只应用于当前元素，而CSSRule修改的规则则会应用于所有被选择符选中的元素

创建规则

DOM规定要向现有样式表添加规则需使用 insertRule（）方法

该方法接收两个参数，规则、插入规则的位置

document.styleSheets[0].insertRule("body{background-color:red}",0);

上述代码表示向当前文档的第一个样式表插入一条规则将body的背景颜色设置为红色

低版本IE不支持该方法，但支持另一种类似的实现：

document.styleSheets[0].addRule("body","background-color:red",0);//IE8及以下

并且addRule添加的规则有限制，最多添加4095条样式规则，超出该上限的调用将会导致错误

删除规则

非低版本IE：

document.styleSheets[0].deleteRule(0);//删除第一个样式表的第一条规则

低版本IE：

document.styleSheets[0].removeRule(0);// IE8及以下

跨浏览器写法

针对上方添加、删除的差异可以使用以下跨浏览器写法：

// 参数：1.样式表 2.选择符 3.css规则文本 4.插入位置
function insertRule(sheet, selectorText, cssText, position){
    if(sheet.insertRule){
        sheet.insertRule(selectorText + "{" + cssText +"}",position);
    }else if(sheet.addRule){
        sheet.addRule(selectorText,cssText,position);
    }
}

// 参数 1.样式表 2.要删除规则的位置
function deleteRule(sheet,index){
    if(sheet.deleteRule){
        sheet.deleteRule(index);
    }else if(sheet.removeRule){
        sheet.removeRule(index);
    }
}