Javascript高级编程学习笔记（51）—— DOM2和DOM3（3）操作样式表
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Javascript高级编程学习笔记（51）—— DOM2和DOM3（3）操作样式表，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2896字，纯文字阅读大概需要5分钟。
内容图文
操作样式表
在JS中样式表用一种类型来表示，以便我们在JS对其进行操作
这一类型就是CSSStyleSheet 即CSS样式表类型，包括了之前 style 对象所不包括的外部样式表以及嵌入样式表
其中<link>以HTMLLinkElement 类型表示
而<style> 以HTMLStyleELement类型表示
但是这两类样式表更加通用的类型则是继承自 StyleSheet 类型的 CSSStyleSheet
其中继承自 StyleSheet 类型的有以下属性：
disabled：表示样式表是否被禁用，该属性可写
href：若是通过<link>引入的样式表，该属性的值则为样式表的 URL 否则为 null
media：当前样式表支持的媒体集合类型，若该集合为空列表则表示样式表适用于所有媒体
ownerNode：指向拥有当前样式表的节点的指针，若样式表通过 @import 导入则该属性的值为 null
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);
}
}
内容总结
以上是互联网集市为您收集整理的Javascript高级编程学习笔记（51）—— DOM2和DOM3（3）操作样式表全部内容，希望文章能够帮你解决Javascript高级编程学习笔记（51）—— DOM2和DOM3（3）操作样式表所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。