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

发布时间：2018-08-17 14:34:31 所属栏目：模式来源：站长网

导读：如下： #div1{ width:100px; } div id=div1/div 如果想通过document.getElementById(div1).style.width来获取是不成功的。必须写inline css 但是line css往往不符合要求，并没有将结构与表现分离所以要用js来或取最终样式,如获取width dom: document.defa

如下：
#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> </body> </html> <br /><center>烈火网更多教程，请访问：<a href=http://www.veryhuo.com/ target=_blank _fcksavedurl="http://www.veryhuo.com/ target=_blank">http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：武汉站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!