Question

我需要一个div的全高，我正在使用

document.getElementById('measureTool').offsetHeight

offsetHeight - 返回元素的高度，包括边框和填充（如果有），但不是边距

但div中的一个嵌套元素的margin-top为20%，因此测量结果错误。我尝试style.marginTop和scrollHeight但没有成功。

如何在javascript中获取元素（div）的完整高度（边框，填充，边距）？

如果没有其他方式我可以使用jQuery。

Answer 1

如果你可以使用jQuery：

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

jQuery docs

对于vanilla javascript，你需要写更多内容（比如总是......）：

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);
}

Live DEMO

code source

Answer 2

这样的事情（没有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);
}

这是working jsfiddle。

Answer 3

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/

我认为这个解决方案更具可读性，但所提出的解决方案都没有考虑非像素的尺寸...... :(

Answer 4

使用arrow functions的另一个功能解决方案：

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

Answer 5

无论如何......对于所有jQuery禁令和快捷方式的人来说，这里有一些加上脚本，扩展了其他答案的维度/ 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')));

Answer 6

Vanilla JavaScript ECMAScript 5.1

element.getBoundingClientRect()返回包含height的DOMRect对象（包括padding＆amp; border）
window.getComputedStyle(element)在应用活动样式表并执行任何计算（如果存在）后返回具有所有CSS属性的对象

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 7

依次使用所有道具，边距，边框，边距和高度。

  "aggregations": {
    "bundled": {
      "top_hits": {
        "size": 10,                   <--- add this
        "sort": [
          {
            "_weight": "asc"
          }
        ]
      }
    }
  }

Answer 8

qdev编写了一个nice solution，但是我认为offsetHeight比getBoundingClientRect（）更快，更好。我还使用ES6来减少代码大小。

/**
 * 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)
}

Answer 9

较早的解决方案可能是理想的。为了找到一种简单的方法，我想出了类似的方法。这会将目标包装在div中。 div的高度已经计算并四舍五入。

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

和JavaScript：

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

Answer 10

在Vanilla JS中在函数getAllmargin中，我们获得上边距和下边距的总和并使用clientHeight获得包括所有填充的高度

var measureTool = document.getElementById('measureTool');
function getAllmargin(elem){
//Use parseInt method to get only number
        return parseInt(window.getComputedStyle(elem, null).getPropertyValue('margin-top')) 
        + parseInt(window.getComputedStyle(elem, null).getPropertyValue('margin-bottom'));
}
//Finally we get entire height  
console.log(measureTool.clientHeight + getAllmargin(measureTool));

html元素（div）的全高，包括边框，填充和边距？

10 个答案: