您当前位置：首页 > web前端 > jscript > javascript 获取网页元素的最终样式

javascript 获取网页元素的最终样式

来源：程序员人生发布时间：2014-06-04 00:17:25 阅读次数：2459次

如下：
#div1{
　　width:100px;
}
<div id="div1"></div>
如果想通过document.getElementById("div1").style.width来获取是不成功的。必须写inline css
但是line css往往不符合要求，并没有将结构与表现分离

所以要用js来或取最终样式,如获取width
dom:
　　document.defaultView.getComputedStyle(obj, null).width;
ie:
　　obj.currentStyle.width;

整个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=Gbk" http-equiv="Content-Type" /><title>Computed Style Example - liehuo.net</title><style type="text/css">div.special{margin-top:10px;width:200px;height:10px;background:aqua;}</style></head><body><div><div id="div1" class="special"></div><input type="button" value="Get Background Color" onclick="javascript:alert(getFinallyStyle('div1', 'width'))" /></div><script type="text/javascript"> //<![CDATA[ function getFinallyStyle(sElementId, sAttribute) { var oElement = document.getElementById(sElementId); return !!document.defaultView ? eval("document.defaultView.getComputedStyle(oElement, null)." + sAttribute) : eval("oElement.currentStyle." + sAttribute); } //]]> </script></body></html> <br /><center>网更多教程，请访问：<a href=http://www.wfuyu.com/ target=_blank _fcksavedurl="http://www.wfuyu.com/ target=_blank">http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 自建蓄水池才能让网站获得高流量和关注度

下一篇 也谈Ajax技术(异步JavaScript和XML)

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点