Определение истинной границы, отступов и полей из Javascript
Есть ли способ определить истинную границу, отступы и поля элементов из кода 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.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Это возможно, но, конечно, у каждого браузера есть своя реализация. К счастью, PPK проделала за нас всю тяжелую работу:
С 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.info("Horizontal padding & border: ", hPadding);
console.info("Vertical padding & border: ", vPadding);
console.info("Horizontal border: ", hBorder);
console.info("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.info("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>свойство 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'] это camelCase. Вы можете исправить это программно, используя var prop='margin-top';prop.replace(/^-/,'').replace(/-[a-z]/g,function(s){return s.substring(1).toUpperCase();});, что приводит к prop==='marginTop' (также работает с префиксами поставщиков).
А чтобы получить отступ без границ, используйте вместо этого .innerWidth () и .innerHeight ().