对象类型
CSSStyleSheet
表示的是使用 链接的外部样式表,也可以是
定义的嵌入式样式表。
var sheets = document.styleSheets; // 所有的 CSSStyleSheet 对象
var link = document.getElementsByTagName('link')[0];
var sheet = link.sheet; // IE8- 中是 .styleSheet
注意一下,如果 的
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 遍历不就可以了吗?真是这么简单便不会来说了。CSSStyleDeclaration
属性即使对于没有设置的值也是有定义的,故所有的属性在这个对象里面都有定义,故不能使用 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
,这个对象是它表现出来的样式(即通过层叠之后的样式)。