从 Javascript 检测真正的边框、填充和边距
Posted
技术标签:
【中文标题】从 Javascript 检测真正的边框、填充和边距【英文标题】：detecting true border, padding and margin from Javascript 【发布时间】：2010-09-25 20:13:39 【问题描述】：有没有办法从 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>
你可以看到，如果你点击按钮，填充没有报告正确。只有通过“样式”直接定义的属性会被报告回来，那些通过 CSS 类定义的属性不会被报告。
有没有办法取回这些属性的最终值？我的意思是浏览器计算和应用所有 CSS 设置后获得的值。
【问题讨论】：
【参考方案1】：这是可能的，但当然，每个浏览器都有自己的实现。幸运的是，PPK 为我们完成了所有艰苦的工作：
http://www.quirksmode.org/dom/getstyles.html
【讨论】：
【参考方案2】：使用 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>你的方式（但你必须声明 paddingLeft, paddingRight..不仅仅是 'padding' ）：
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>【讨论】：
要获得无边框的填充，请改用 .innerWidth() 和 .innerHeight()。【参考方案3】：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 的解决方案很好。
【讨论】：
请注意，当使用document.defaultView.getComputedStyle(div,null).getPropertyValue('margin-top') 时，有一个破折号，但对于div.currentStyle['marginTop']，它是驼峰式。您可以使用var prop='margin-top';prop.replace(/^-/,'').replace(/-[a-z]/g,function(s)return s.substring(1).toUpperCase();); 以编程方式解决此问题，这会导致prop==='marginTop'（也适用于供应商前缀）。以上是关于从 Javascript 检测真正的边框、填充和边距的主要内容，如果未能解决你的问题，请参考以下文章