从Javascript检测真实边框，填充和边距
[英]detecting true border, padding and margin from Javascript
问题描述
Is there a way to detect the true border, padding and margin of elements from Javascript code? 
有没有办法从Javascript代码中检测元素的真实边框，填充和边距？ If you look at the following code: 如果您查看以下代码：
<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>
you can see, if you click the button, that the padding is not reported right. 如果单击按钮，则可以看到填充未报告正确。 Only the properties defined directly through "style" are reported back, those defined through a CSS class are not reported. 仅报告通过“样式”直接定义的属性，不报告通过CSS类定义的属性。
Is there a way to get back the final values of these properties? 有没有办法找回这些属性的最终值？ I mean the values obtained after all CSS settings are computed and applied by the browser. 我的意思是浏览器计算并应用所有CSS设置后获得的值。
3 个解决方案
解决方案1
10 2013-02-28 02:51:42
the style property can get the styles that are assigned inline like style属性可以获得内联分配的样式
<div id="target" style="color:#ddd;margin:10px">test</div> if you want to get the styles assigned in outer css file or <style/> element, try this: <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);
if you are using jQuery, @vsync 's solution is fine. 如果你使用jQuery，@ vsync的解决方案很好。
解决方案2
7 2009-08-14 23:54:24
With jQuery: 使用jQuery：
var $elm = $('.box'); var hPadding = $elm.outerWidth() - $elm.width(); var vPadding = $elm.outerHeight() - $elm.height(); var hBorder = $elm.outerWidth() - $elm.innerWidth(); var vBorder = $elm.outerHeight() - $elm.innerHeight(); console.log("Horizontal padding & border: ", hPadding); console.log("Vertical padding & border: ", vPadding); console.log("Horizontal border: ", hBorder); console.log("Vertical border: ", vBorder);
.box{ width: 50%; padding:10vw; border:10px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='box'></div>
Your way (but you have to state paddingLeft, paddingRight..not just 'padding' ): 你的方式（但你必须说明paddingLeft，paddingRight..不仅仅是'填充'）：
var elm = $('.box'); console.log("padding left (PX): ", elm.css("paddingLeft"));
.box { padding:0 50px 0 5vw; border: 2px solid green; width: 300px; height: 300px; margin-left: 4px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box">some text here</div>
解决方案3
6 已采纳 2008-12-08 12:39:40
It's possible, but of course, every browser has its own implementation. 这是可能的，但当然，每个浏览器都有自己的实现。 Luckily, PPK has done all the hard work for us: 幸运的是，PPK为我们做了所有艰苦的工作：
http://www.quirksmode.org/dom/getstyles.html http://www.quirksmode.org/dom/getstyles.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.