اكتشاف الحدود الحقيقية والحشوة والهامش من Javascript

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

سؤال

هل هناك طريقة لاكتشاف الحدود الحقيقية والحشوة وهامش العناصر من كود 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 وتطبيقها بواسطة المتصفح.

هل كانت مفيدة؟

المحلول

وهذا ممكن، ولكن بطبيعة الحال، كل متصفح له تنفيذه الخاصة. لحسن الحظ، لم تفعل PPK كل العمل الشاق بالنسبة لنا:

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

نصائح أخرى

والممتلكات style يمكن الحصول على الأنماط التي تم تعيينها مضمنة مثل

و<div id="target" style="color:#ddd;margin:10px">test</div> إذا كنت ترغب في الحصول على الأساليب المعينة في الملف المغلق الخارجي أو عنصر <style/>، حاول هذا: 

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

وإذا كنت تستخدم مسج، حلvsync الصورة على ما يرام.

مع مسج:

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>

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top