「CSS」DOM2 级样式
对象类型
CSSStyleSheet
表示的是使用 <link> 链接的外部样式表，也可以是 <style> 定义的嵌入式样式表。
var sheets = document.styleSheets; // 所有的 CSSStyleSheet 对象 var link = document.getElementsByTagName('link')[0]; var sheet = link.sheet; // IE8- 中是 .styleSheet 注意一下，如果 <link> 的 rel 属性不是 stylesheet 的情况下，是无法获取 sheet 属性的。
重要的属性有：
sheet : 对应的 CSSStyleDeclaration 对象。
disabled : 设置为 true 可以禁用此样式表。
link : 外部样式表是 URL 地址，内嵌样式表是 null 。
parentStyleSheet : 仅是被 @import 导入的样式表拥有，指向使用 @import 导入该样式表的样式表。
cssRules : CSSStyleRule 对象集合。
重要的方法有：
deleteRule(index) : 删除 index 处的 Rule。 IE8- 为 removeRule(index) 。
insertRule(selectorText + '{' + cssText + '}' , index) : 向指定位置插入一条 Rule，内容为 selectorText + '{' + cssText + '}' 。IE8- 为 addRule(selectorText, cssText, index) 。
CSSStyleRule
CSS 样式表的每一条记录都会表示成一个 CSSStyleRule 对象，比如：
div .relative { position: relative; } #sidebar { float: left; } 就会产生两个 CSSStyleRule 对象。
这个对象主要使用的属性有以下几个：
cssText : 样式的内容，不包括选择器文本和花括号。 IE8-不支持。
style : 这个条目的 CSSStyleDeclaration 对象。
selectorText : 返回当前选择器的文本，即上面的 div .relative 和 #sidebar 。
作者认为，使用上面的 CSSStyleSheet.cssRules 结合这个对象的 selectorText 属性可以查找到某一个特定的样式，进而进行更改。
CSSStyleDeclaration
所有支持 style 属性的 HTML 元素的 HTMLElement 对象都有一个 style 属性。这个属性包含着所有通过标签中 style 属性指定的样式信息，但不包括外部样式表和内嵌样式表的样式信息。
style 属性的属性与样式一一对应，通过设置相应的属性便可以达到控制样式的目的。
使用短划线的属性，例如 font-size ，对应的属性名就是它的驼峰命名形式，即 .fontSize 。
由于 float 是 JavaScript 的关键字，不能直接使用，故使用 .cssFloat 代替（IE8- 中是 .styleFloat ）。
var el = document.getElementById('div1'); el.style.width = '100px'; el.style.cssFloat = 'left'; el.style.backgroundImage = 'url(/images/logo.png)'属性和方法：
length : 所有已经设置了值的属性个数。
getPropertyValue(propName) : 获得某个属性的值，未设置返回 null 。
getPropertyPriority(propName) : 检测某个属性是否设置了 !important ，是返回 "important" ，否返回 "" 。
removeProperty(propName) : 删除属性。
setProperty(propName, value, "important" | "") : 设置某个属性的值和优先级。
样式遍历
对于内联样式表的属性进行遍历，即对 HTMLElement 的 .style 属性进行遍历。
也许你们会想，使用 for in 遍历不就可以了吗？真是这么简单便不会来说了。
CSSStyleSheet 属性即使对于没有设置的值也是有定义的，故所有的属性在这个对象里面都有定义，故不能使用 for in。
但是这个对象提供给了我们一种方式，它将所有赋值了的属性全部使用 数字:属性名 映射在对象中。在上面也提到， length 属性是所有已赋值的属性的个数。那么我们可以使用如下方法遍历。
var style = document.getElementById('sidebar').style; for(var i = 0; i < style.length; i++) { console.log(style[i] + ': ' + style[style[i]]); }仅仅是获得非常少的样式信息并不是我们所需要的，如何获得这个元素的所有样式信息，包括外部样式表，内嵌样式表，内联样式表，浏览器默认样式？
IE9+ 以及其他现代浏览器提供给了我们 window.getComputedStyle(el) 函数。
传入一个 DOM 元素，返回一个 CSSStyleDeclaration ，这个对象是它表现出来的样式（即通过层叠之后的样式）。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
