使用Javascript检测真正的边框、内边距和外边距

Question

使用Javascript检测真正的边框、内边距和外边距

10

有没有办法从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设置之后获得的值。

- Gabi

3个回答

7

使用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>

- vsync

1

而要获取没有边框的填充，请使用 .innerWidth() 和 .innerHeight()。 - Bob Denny

6

这是可能的，当然每个浏览器都有自己的实现方式。幸运的是，PPK已经为我们做了所有的艰苦工作：

http://www.quirksmode.org/dom/getstyles.html

- Vatos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- YuC · Accepted Answer

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的解决方案就可以了。