從Javascript檢測真實邊框，填充和邊距

Question

有沒有辦法從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設置后獲得的值。

Answer 1

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的解決方案很好。

Answer 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..不僅僅是'填充'）：

 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>

Answer 3

這是可能的，但當然，每個瀏覽器都有自己的實現。 幸運的是，PPK為我們做了所有艱苦的工作：

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

從Javascript檢測真實邊框，填充和邊距

問題描述

3 個解決方案

解決方案1
10 2013-02-28 02:51:42

解決方案2
7 2009-08-14 23:54:24

使用jQuery：

解決方案3
6 已采納 2008-12-08 12:39:40

從Javascript檢測真實邊框，填充和邊距

問題描述

3 個解決方案

解決方案1 10 2013-02-28 02:51:42

解決方案2 7 2009-08-14 23:54:24

使用jQuery：

解決方案3 6 已采納 2008-12-08 12:39:40

解決方案1
10 2013-02-28 02:51:42

解決方案2
7 2009-08-14 23:54:24

解決方案3
6 已采納 2008-12-08 12:39:40