HTML中定义样式的方式有三种:通过元素包含外部样式表文件、使用元素定义嵌入式样式,以及使用style特性定义针对特定元素的样式。“DOM2级样式"模块围绕这3种应用样式提供了一套API。要确定浏览器是否支持DOM2级定义的CSS能力,可以使用下列代码:
var supportsDOM2CSS=document.implementation.hasFeature("CSS","2.0";
var supportsDOM2CSS2=document.implementation.hasFeature{"CSS2”,“2.0”);
任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleSeclaration实例,包含着通过HTML的style特性指定的所有样式信息,但不包含与外部样式表或嵌入样式表经层叠而来的样式。对于使用短划线(如background-color)的CSS属性名,必须将其转换为驼峰大小写形式,才能通过JavaScript来访问。
多数情况下,都可以通过简单的转换属性名的格式来实现转换。其中一个不能直接转换的CSS属性就是float,因为float是JavaScript中的保留字。“DOM2级样式”规范规定样式对象上相应的属性名应该是CSSFloat;Firefox、safari、opera和chrome都支持这个属性,而IE支持的则是styleFloat。
通过style对象可以取得在style特性中指定的样式
console.log(myDiv.style.backgroundColor);
console.log(myDiv.style.width );也可以通过JavaScript为其改变样式
myDiv.style.width="200px";
DOM样式的属性和方法
”DOM2级样式规范为style对象定义了一些属性和方法。这些属性和方法在提供元素的style特性值的同时,也可以修改样式。
cssTest:在读取模式下,cssTest返回浏览器对style特性中css代码的内部表示。在写入模式下,赋给cssTest的值会重写整个style特性的值
length:元素的css属性的数量
parentRule:表示CSS信息的CSSRule对象
getPropertyCSSValue(propertyName):返回给定属性值的CSSValue对象
getPropertyValue(propertyName):返回给定属性的字符串值
item:返回规定你跟位置的css属性的名称
使用getPropertyValue()方法可以取得属性名,进一步取得属性值
颜色
var div=document.getElementById("div1");
var prop,value,i,len;
for(i=0,len=div.style.length;i
运行结果
要从元素的样式中移除某个css属性,需要使用removeProperty()方法
div.style.removeProperty("height");
计算的样式
虽然style对象能够提供支持style特性的任何元素的样式信息,但他不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。“DOM2级样式”增强了document.defaultView,提供了getComputedStyle()方法。该方法返回一个CSSStyleDeclaration对象,其中包含当前元素所有计算的样式(style特性中的css属性覆盖内联样式的css属性,覆盖外部引用样式的属性)
var div2=document.getElementById("div2");
var computedStyle=document.defaultView.getComputedStyle(div2,null);
console.log(computedStyle.backgroundColor);
2 操作样式表
CSSStyleSheet类型表示的是样式表,包括通过元素包含的样式表和在