【读书笔记】DOM2级中关于几种CSS实例的理解
2017-06-21 10:25
260 查看
之前对DOM2里CSS规则这个概念总是一知半解,几种CSS类型也傻傻分不清:CSSStyleDeclaration类型,CSSStyleSheet类型,CSSRule类型,现在自己总结一下。
1、CSSStyleDeclaration 表示一个CSS属性键值对的集合。元素的style属性只有行内样式的信息,是CSSStyleDeclaration的实例,不包含嵌入样式和外联样式
如:div.style.width = 100px;
2、通过document.defautView.getComputedStyle()方法得到的同样是CSSStyleDeclaration实例。
3、CSSStyleSheets类型,表示样式表,其中最重要一属性为cssRules(IE不支持,有一类似的rules属性),表示样式表中包含的样式规则的集合。
得到CSSStyleSheets类型的方法:document.styleSheets。
首先取得样式表,即CSSStyleSheets类型: var sheets = document.styleSheets;
取得第一个样式表: var sheet = sheets[0]; (或sheets.item(0))
获取样式规则,CSSStyleRules类型,继承了CSSRule类: var rules = sheet.cssRules || sheet.rules;
第一条规则: var rule = rules[0];
我的理解是,通俗易懂的说CSSRule对象就是我们CSS代码中的一段如:
.myclass {
background: #EFC url('someurl') no-repeat;
}
以上整个代码就是一个CSSRule对象,表示一条CSS规则。
1、CSSStyleDeclaration 表示一个CSS属性键值对的集合。元素的style属性只有行内样式的信息,是CSSStyleDeclaration的实例,不包含嵌入样式和外联样式
如:div.style.width = 100px;
2、通过document.defautView.getComputedStyle()方法得到的同样是CSSStyleDeclaration实例。
3、CSSStyleSheets类型,表示样式表,其中最重要一属性为cssRules(IE不支持,有一类似的rules属性),表示样式表中包含的样式规则的集合。
得到CSSStyleSheets类型的方法:document.styleSheets。
首先取得样式表,即CSSStyleSheets类型: var sheets = document.styleSheets;
取得第一个样式表: var sheet = sheets[0]; (或sheets.item(0))
获取样式规则,CSSStyleRules类型,继承了CSSRule类: var rules = sheet.cssRules || sheet.rules;
第一条规则: var rule = rules[0];
我的理解是,通俗易懂的说CSSRule对象就是我们CSS代码中的一段如:
.myclass {
background: #EFC url('someurl') no-repeat;
}
以上整个代码就是一个CSSRule对象,表示一条CSS规则。
相关文章推荐
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
- 关于对DOM的childNodes的理解
- 关于SAX,DOM,JAXP,JDOM,DOM4J的一些理解
- 理解ASM(二)关于ASM实例的初始化参数
- 关于栈的理解(读书笔记)
- 深入理解Java虚拟机 -- 读书笔记(3):几种垃圾收集器
- CSS关于相对定位和绝对定位的说明实例
- 深入理解Java虚拟机 -- 读书笔记(3):几种垃圾收集器
- jQuery实例6:对DOM的简单操作和对CSS的操作
- 关于css中hideFocus的理解
- 关于Handler的理解(附带实例)
- 转:关于CSS中float属性的理解
- 关于SAX,DOM,JAXP,JDOM,DOM4J的一些理解
- 关于SAX,DOM,JAXP,JDOM,DOM4J的一些理解
- 关于css position和scroll事件的一些理解
- 关于 a:active 的一点理解 [CSS]
- 关于SAX,DOM,JAXP,JDOM,DOM4J的一些理解
- 关于对SAX,DOM,JAXP,JDOM,DOM4J的一些理解
- 关于RAC中的JOB运行在哪个实例的理解