js抓取html属性,JS获取CSS属性值

JS获取CSS属性值方法有很多，我这里介绍两种

obj.style方法，这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”)，看一下代码

?

XML/HTML代码

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>??

??

??

JS获取CSS属性值??

.ss{color:#cdcdcd;}??

–>??

??

??

??

JS获取CSS属性值

??

??? alert(document.getElementById(“css88”).style.width);//200px???

??? alert(document.getElementById(“css88”).style.color);//空白???

??????

??

??

上面这个例子对id为”css88″的div设置了2种烦事的样式，包括style和外部样式class。

从alert出来的信息可以看到，document.getElementById(“css88”).style方法获取不到class为ss的属性和值。

那么这么样才能获取到class为ss的属性和值呢？

IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法。

网上一个比较方法是：

?

XML/HTML代码

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>??

??

??

S获取CSS属性值??

??

.ss{background:blue; color:#cdcdcd; width:200px}??

–>??

??

??

??

sdf

??

??

function GetCurrentStyle (obj, prop) {?????

??? if (obj.currentStyle) {????????

??????? return obj.currentStyle[prop];?????

??? }??????

??? else if (window.getComputedStyle) {????????

??????? propprop = prop.replace (/([A-Z])/g, “-$1”);???????????

??????? propprop = prop.toLowerCase ();????????

??????? return document.defaultView.getComputedStyle (obj,null)[prop];?????

??? }??????

??? return null;???

}???

var dd=document.getElementById(“qq”);???

alert(GetCurrentStyle(dd,”width”));???

??

??

??

当然，如果您是引用外部的css文件同样适用。

另：可以将上面的方法简化为

JavaScript代码

function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性???

?return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];???

}