Erfassen wahre Grenze, Polsterung und Marge von Javascript

StackOverflow https://stackoverflow.com/questions/349257

Frage

Gibt es eine Möglichkeit, die wahre Grenze, Polsterung und Marge von Elementen von Javascript-Code zu erkennen? Wenn Sie auf den folgenden Code aussehen: 

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

können Sie sehen, wenn Sie auf die Schaltfläche klicken, dass die Polsterung nicht richtig gemeldet wird. Nur die direkt durch „Stil“ definierten Eigenschaften werden zurückgemeldet, sind diejenigen, die durch eine CSS-Klasse nicht gemeldet.

Gibt es eine Möglichkeit die endgültigen Werte dieser Eigenschaften zu kommen? Ich meine die Werte erhalten, nachdem alle CSS-Einstellungen berechnet und durch den Browser angewendet wird.

War es hilfreich?

Lösung

Es ist möglich, aber natürlich jeder Browser hat seine eigene Umsetzung. Glücklicherweise PPK getan hat all die harte Arbeit für uns:

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

Andere Tipps

die style Eigenschaft kann die Stile erhalten, die inline wie

zugeordnet sind,

<div id="target" style="color:#ddd;margin:10px">test</div> wenn Sie die Stile in der äußeren CSS-Datei oder <style/> Element zugeordnet werden wollen, versuchen Sie dies: 

var div = document.getElementById("target");
var style = div.currentStyle || window.getComputedStyle(div);
display("Current marginTop: " + style.marginTop);

Wenn Sie jQuery verwenden, @vsync ‚s Lösung ist in Ordnung.

mit 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>

Ihr Weg (aber man muss sagen, paddingLeft, paddingRight..not nur '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>

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top