访问元素样式

1. 通过style样式获取style特性中指定的样式。

Eg：

<div id=’myDiv’ style=’background-color:blue;width:10px; height:25px’></div>

在style特性中指定的样式信息可以通过下列代码获得：

var myDiv=document.getElementById(‘myDiv’);

alert(myDiv.style.backgroundColor);  //”bule”

alert(myDiv.style.width);  //”10px”

alert(myDiv.style.height);  //”25px”

如果没有为元素设置style特性，那么style对象中可能会包含一些默认的值，但这些值并不能准确的反映该元素的样式信息。

Ps:多数情况下css属性可以通过简单的转换属性名的格式来实现转换，其中只有一个不能直接转换的css属性是float。由于float是js的保留字，因此不能用作属性名，在非IE支持用cssFloat，在IE支持用styleFloat。

2.跨浏览器获取样式表层叠样式

 虽然style对象能够提供支持style特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。非IE支持getComputedStyle()方法，接受两个参数，要取得计算样式的元素和一个伪元素字符串（例如“：after”），如果不需要伪元素，第二个参数可以是null。IE支持currentStyle属性，下面是跨浏览器获取style样式。

 

function getStyle(element, attr) {

var  value;

if (typeof window.getComputedStyle != 'undefined'){   //W3C

  value = window.getComputedStyle(element, null)[attr];

} else if (typeof element.currentStyle != 'undeinfed') {  //IE

value = element.currentStyle[attr];

}

return value;

};