Как можно получить нативным JS полную ширину элемента с учетом border, margin, padding, если эти свойства не заданы через JS?
2 ответа
Вот так
var element = document.getElementById("elem");
var marginLeft = parseInt(getComputedStyle(element, true).marginLeft);
var marginRight = parseInt(getComputedStyle(element, true).marginRight);
console.log(element.offsetWidth + marginLeft + marginRight)
#elem {
width: 300px;
height: 300px;
padding: 15px;
margin: 15px;
border: 1px solid #000;
}
<div id="elem"></div>
-
-
-
не работает, scrollWidth учитывает только
padding
, аclientWidth
-padding
иborder
– AmandiCommented 2 февр. 2018 в 13:49 -
-
Берем offsetWidth
который включает в себя padding
и border
.
А для margin
. используем getComputedStyle
var element = document.getElementById('offsetWidth');
var style = window.getComputedStyle(element, null);
var width = element.offsetWidth;
var margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
var allWidth = width + margin;
console.log(allWidth);
#offsetWidth{
width: 100px;
height: 100px;
margin: 20px;
padding: 10px;
border: 1px solid green;
background: red;
}
<div id="offsetWidth"></div>
-
Можно еще проще: var margin = parseFloat(style.margin)*2; Commented 2 февр. 2018 в 14:07