length属性可以获取应用给元素的CSS属性的数量,可以使用这个属性来遍历CSS属性。它经常和item()方法配合使用。在使用length属性和item()方法的时候,style对象实际上是一个集合,也可以使用方括号语法来替代item()来获取指定位置的CSS属性,例如下面的例子:

getPropertyCSSValue:返回包含指定属性值的CSSRule对象。

在HTML中定义样式有3种方法:通过标签来引用外部的样式表文件,使用

parentRule:表示CSS信息的CSSRule对象。

虽然style对象能够提供支持style特性的任何元素的样式信息,但是它不包含那些从其它样式表层叠过来的样式。“DOM2级样式”增强了document.defaultView,提供了一个getComputedStyle()方法。该方法接收2个参数:要取得计算样式的元素和一个伪元素字符串。如果不需要伪元素信息,第二个参数可以为nullgetComputedStyle()方法返回一个CSSStyleDelaration对象。其中包含了当前元素的所有计算的样式。下面是一个例子:

getPropertyPriority:如果给定的CSS属性使用了!important设置,则返回important,否则返回空字符串。

setProperty(propertyName,value,priority):将指定属性设置为相应的值,并加上优先权标志(important或一个空字符串)。

getPropertyValue:返回指定属性的字符串值。

vardiv=document.getElementById;//设置DIV元素的背景颜色div.style.backgroundColor="#f00";//修改DIV元素的大小div.style.width="100px";div.style.height="150px";//指定DIV元素的边框div.style.border="1pxsolid#00f";

Firefox、Chrome、Safari和Opera
9+都支持以上的属性和方法,但是IE浏览器只支持cssText属性。Safari
3+和Chrome浏览器是唯一支持getPropertyCSSValue()方法的浏览器。 计算的样式

vardiv=document.getElementById;console.info(div.style.backgroundColor);console.info;console.info;
for(vari=0,len=div.style.length;i通过item()方法或方括号的方法,我们都可以获取到CSS的属性名称(注意:获取的CSS属性名称是破折号形式,而不是驼峰形式)。在获取CSS属性名称之后,我们就可以通过getPropertyValue()方法来获取这个属性对应的值。for(vari=0,len=div.style.length;igetPropertyValue()方法会返回CSS属性的字符串表示。如果你需要得到更多的信息,可以使用getPropertyCSSValue()方法。该方法返回一个包含2个属性的CSSValue对象,这两个属性分别是:cssText和cssValueType。其中,cssText属性的值和使用getPropertyValue()方法获取的值相同,而cssValueType则是一个数值常量,表示值的类型:0表示继承的值,1表示基本的值,2表示值列表,3表示自定义的值。只有Safari 3+和Chrome浏览器支持getPropertyCSSValue()这个方法。要从元素样式中移除某个CSS属性,可以使用removeProperty()方法。使用该方法一次只移除一个属性,被移除后的属性将使用默认的样式。例如,要想移除元素的背景颜色,可以像下面这样写代码:div.style.removeProperty("backgroundColor");

length:应用给元素的CSS属性的数量。

通过cssText属性可以读取指定元素的style特性中的CSS代码,也可以设置指定元素的style特性。例如:

访问元素的样式

通过style对象,我们也可以取得style特性中指定的CSS样式,例如下面的例子:

removeProperty:从样式中删除指定的属性。

background-imagestyle.backgroundImagewidthstyle.widthcolorstyle.colorfont-familystyle.fontFamilyz-indexstyle.zIndex有一个例外的CSS属性是float属性,因为它是JavaScript的保留字,所以它不能用来作为属性名称。在“DOM2级样式”规范规定该属性对应的JavaScript属性为cssFloat,Firefox、Chrome、Safari和Opera浏览器都支持这个属性,但是IE浏览器支持的是styleFloat属性。

cssText属性可以快速的一次为元素设置多个CSS属性。

我们只要取得了一个有效的DOM元素的引用,就可以随时使用JavaScript来为它添加样式。例如下面的例子:

DOM样式的属性和方法

cssText:通过该属性可以访问style特性中的CSS代码。

如果浏览器支持DOM2级的CSS能力,上面的代码返回的变量值为true

CSS属性JavaScript属性

在上一篇文章中我们介绍了”JavaScript面向对象-基于原型链实现继承”,本文将继续了解:JavaScript文档对象模型-DOM2级样式。

varsupportsDOM2CSS=document.implementation.hasFeature("CSS","2.0");varsupportsDOM2CSS2=document.implementation.hasFeature("CSS2","2.0");

“DOM2级样式”规范还为style对象定义了一些属性和方法。这些属性和方法在提供元素style特性值的同时,也可以修改元素的样式。

任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例,包含着所有通过HTML的style特性指定的所有的样式信息,但是不包括与外部样式表或嵌入样式表经过层叠而来的样式。在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。

需要注意的是,在JavaScript中,访问CSS属性使用的是驼峰格式,而在CSS样式中的CSS属性使用的是“-”连接的形式。所以在使用的时候要将“-”连接形式的CSS属性转换为驼峰形式的JavaScript属性,例如下面的例子:

元素来定义嵌入式样式和使用style特性来针对特定的元素设置样式。“DOM2级样式”模块是围绕这3种应用样式机制的一套API。要确定浏览器是否支持DOM2级的CSS能力,可以使用下面的代码:

getComputedStyle()#myDiv{width:100px;height:100px;background-color:#ff0;}
vardiv=document.getElementById;div.style.cssText="background-color:#f00;width:200px;height:300px;";console.info;

item:返回指定位置的CSS属性的名称。

相关文章

网站地图xml地图