有没有办法从 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 设置后获得的值。
最佳答案
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 的解决方案就可以了。
关于javascript - 从 Javascript 检测真正的边框、填充和边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/349257/