有没有办法从 Javascript 代码中检测元素的真实边框、填充和边距？如果你看下面的代码：
<html>
<head>
<style>
<!--
.some_class {
padding-left: 2px;
border: 2px solid green;
}
-->
</style>
<script>
<!--
function showDetails()
{
var elem = document.getElementById("my_div");
alert("elem.className=" + elem.className);
alert("elem.style.padding=" + elem.style.padding);
alert("elem.style.paddingLeft=" + elem.style.paddingLeft);
alert("elem.style.margin=" + elem.style.margin);
alert("elem.style.marginLeft=" + elem.style.marginLeft);
alert("elem.style.border=" + elem.style.border);
alert("elem.style.borderLeft=" + elem.style.borderLeft);
}
-->
</script>
</head>
<body>
<div id="my_div" class="some_class" style="width: 300px; height: 300px; margin-left: 4px;">
some text here
</div>
<button onclick="showDetails();">show details</button>
</body>
</html>
如果单击该按钮，您可以看到填充的报告不正确。仅报告直接通过“style”定义的属性，不报告通过 CSS 类定义的属性。
有没有办法取回这些属性的最终值？我的意思是浏览器计算并应用所有 CSS 设置后获得的值。
the style属性可以获取内联分配的样式，例如
<div id="target" style="color:#ddd;margin:10px">test</div>如果你想获取外部 css 文件中分配的样式或<style/>元素，试试这个：
var div = document.getElementById("target");
var style = div.currentStyle || window.getComputedStyle(div);
display("Current marginTop: " + style.marginTop);
如果您使用 jQuery，@vsync 的解决方案就很好。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
