테두리, 패딩 및 여백을 포함한 html 요소 (div)의 전체 높이?

테두리, 패딩 및 여백을 포함한 html 요소 (div)의 전체 높이?

---

div의 전체 높이가 필요합니다. 현재 사용하고 있습니다.

document.getElementById('measureTool').offsetHeight

offsetHeight -여백이 아닌 테두리와 패딩을 포함한 요소의 높이를 반환합니다.

그러나 DIV 내부의 중첩 된 요소 중 하나는이 margin-top의를 20%내가 잘못 측정을 얻을 수 있도록. 나는 시도 style.marginTop하고 scrollHeight성공하지.

자바 스크립트에서 요소 (div)의 전체 높이 (테두리, 패딩, 여백)를 어떻게 얻을 수 있습니까?

다른 방법이 없다면 jQuery는 괜찮습니다.

---

jQuery를 사용할 수있는 경우 :

$('#divId').outerHeight(true) // gives with margins.

jQuery 문서

바닐라 자바 ​​스크립트의 경우 더 많이 작성해야합니다 (항상 그렇듯이 ...).

function Dimension(elmID) {
    var elmHeight, elmMargin, elm = document.getElementById(elmID);
    if(document.all) {// IE
        elmHeight = elm.currentStyle.height;
        elmMargin = parseInt(elm.currentStyle.marginTop, 10) + parseInt(elm.currentStyle.marginBottom, 10) + "px";
    } else {// Mozilla
        elmHeight = document.defaultView.getComputedStyle(elm, '').getPropertyValue('height');
        elmMargin = parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-bottom')) + "px";
    }
    return (elmHeight+elmMargin);
}

라이브 데모

코드 소스

---

이와 같은 것 (jquery 없음)은 어떻습니까? @gdoron의 대답과 비슷하지만 조금 더 간단합니다. IE9 +, Firefox 및 Chrome에서 테스트했습니다.

function getAbsoluteHeight(el) {
  // Get the DOM Node if you pass in a string
  el = (typeof el === 'string') ? document.querySelector(el) : el; 

  var styles = window.getComputedStyle(el);
  var margin = parseFloat(styles['marginTop']) +
               parseFloat(styles['marginBottom']);

  return Math.ceil(el.offsetHeight + margin);
}

다음은 작동하는 jsfiddle 입니다.

---

var el = document.querySelector('div');

var elHeight = el.offsetHeight;
elHeight += parseInt(window.getComputedStyle(el).getPropertyValue('margin-top'));
elHeight += parseInt(window.getComputedStyle(el).getPropertyValue('margin-bottom'));

console.log(elHeight);

https://jsfiddle.net/gbd47ox1/

이 솔루션이 더 읽기 쉽다고 생각하지만 제시된 솔루션 중 픽셀이 아닌 크기를 설명하는 솔루션은 없습니다 ... :(

---

화살표 기능을 사용하는 또 다른 기능 솔루션 :

let el = document.querySelector('div');
let style = window.getComputedStyle(el);
let height = ['height', 'padding-top', 'padding-bottom']
        .map((key) => parseInt(style.getPropertyValue(key), 10))
        .reduce((prev, cur) => prev + cur);

---

오래된 것-어쨌든 ... 모든 jQuery-banning 및 바로 가기 사람들을 위해 여기에 다른 답변의 차원 / getabsoluteheight 접근 방식을 확장하는 몇 가지 플러스 스크립팅이 있습니다.

function getallinheight(obj) {
  var compstyle=(typeof window.getComputedStyle==='undefined')?obj.currentStyle:window.getComputedStyle(obj);
  var marginTop=parseInt(compstyle.marginTop);
  var marginBottom=parseInt(compstyle.marginBottom);
  var borderTopWidth=parseInt(compstyle.borderTopWidth);
  var borderBottomWidth=parseInt(compstyle.borderBottomWidth);
  return obj.offsetHeight+
         (isNaN(marginTop)?0:marginTop)+(isNaN(marginBottom)?0:marginBottom)+
         (isNaN(borderTopWidth)?0:borderTopWidth)+(isNaN(borderBottomWidth)?0:borderBottomWidth);
}
alert(getallinheight(document.getElementById('measureTool')));

---

바닐라 자바 ​​스크립트 ECMAScript 5.1

• element.getBoundingClientRect () 는 height( padding& 포함 border) 을 포함하는 DOMRect 객체를 반환합니다.
• window.getComputedStyle (element) 는 활성 스타일 시트를 적용하고 계산 (있는 경우)을 수행 한 후 모든 CSS 속성이있는 객체를 반환합니다.

var element = document.getElementById('myID'),
    height = element.getBoundingClientRect().height,
    style = window.getComputedStyle(element);
    
// height: element height + vertical padding & borders
// now we just need to add vertical margins
height = ["top", "bottom"]
  .map(function(side) {
    return parseInt(style['margin-' + side], 10)
  })
  .reduce(function(total, side) {
    return total + side
  }, height)
  
// result: compare with devtools computed measurements
document.querySelector('.result').innerText = 'Total height is: ' + height + 'px';

#myID {
  padding: 10px 0 20px;
  border-top: solid 2px red;
  border-bottom: solid 3px pink;
  margin: 5px 0 7px;
  background-color: yellow;
}

.result {
  margin-top: 50px;
}

<div id="myID">element</div>
<div class="result"></div>

---

Use all the props, margin, border, padding and height in sequence.

function getElmHeight(node) {
    const list = [
        'margin-top',
        'margin-bottom',
        'border-top',
        'border-bottom',
        'padding-top',
        'padding-bottom',
        'height'
    ]

    const style = window.getComputedStyle(node)
    return list
        .map(k => parseInt(style.getPropertyValue(k)), 10)
        .reduce((prev, cur) => prev + cur)
}

---

qdev wrote a nice solution, however I think offsetHeight is faster and better supported than getBoundingClientRect(). I also used ES6 to reduce the code size.

/**
 * Returns the element height including margins
 * @param element - element
 * @returns {number}
 */
function outerHeight(element) {
    const height = element.offsetHeight,
        style = window.getComputedStyle(element)

    return ['top', 'bottom']
        .map(side => parseInt(style[`margin-${side}`]))
        .reduce((total, side) => total + side, height)
}

---

The earlier solutions are probably ideal. In search of an easy way, I came up with something like that. This wraps the target in a div. The height of the div is already calculated and rounded.

<div style="margin: 0; padding: 0; border: none;">
    <p class="target">something info ex</p>
</div>

and in JavaScript:

var height = document.querySelector(".target").parentElement.offsetHeight;

ReferenceURL : https://stackoverflow.com/questions/10787782/full-height-of-a-html-element-div-including-border-padding-and-margin