Полная высота html-элемента (div), включая border, padding и margin?

Мне нужна полная высота div, я сейчас использую

document.getElementById('measureTool').offsetHeight

offsetHeight - возвращает высоту элемента, включая границы и отступы, если они есть, но не поля

Но один из вложенных элементов внутри div, имеетmargin-top of20%, поэтому я получил неправильное измерение. Я пыталсяstyle.marginTop а такжеscrollHeight безуспешно

Как я могу получить полную высоту (границы, отступы, поля) элемента (div) в javascript?

Если нет другого пути, я в порядке с jQuery.

Ответы на вопрос(9)

поля, границы, отступы и высоту в последовательности.

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

вероятно, идеальны. В поисках простого пути я придумал что-то подобное. Это оборачивает цель в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;
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);
 Martin06 мар. 2018 г., 21:49
Ты можешь добавитьmargin-top а такжеmargin-bottom

qdev написал хорошее решение, однако я думаю, что 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)
}
 Fabian von Ellerts11 мар. 2019 г., 10:13
@ Рафаэль Спасибо! Конечно, я сделал то же самое, хахаха
 Raphael09 мар. 2019 г., 22:36
Мне очень нравится этот стиль @ fabian-von-ellerts Я немного изменил его и положил в свою коллекцию помощников. Надеюсь это нормально?
Решение Вопроса

Если вы можете использовать jQuery:

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

jQuery docs

Для ванильного 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

исходный код

 Racing Tadpole17 апр. 2016 г., 07:33
Также обратите внимание, что jQuery может сообщать externalHeight, который игнорирует верхнее поле первого дочернего элемента и нижнее поле последнего дочернего элемента - см. / Stackoverflow.com вопросы / 9770248 / ....
 Edza28 мая 2012 г., 18:34
Я бы предпочел не делать этого (проект на самом деле не является веб-страницей). Но спасибо за решение jquery и быстрый ответ! :)
 Vitim.us30 сент. 2012 г., 01:23
Обход DOM с помощью getElementById каждый раз - это плохой код, пустая трата времени процессора, а также больше кода. Отредактировал ваш ответ, кэшируя вяз в переменной.
 Chris Middleton24 февр. 2015 г., 23:02
Приведенный выше код не работает в случае, о котором спрашивал OP. Смотрите эту скрипку: Jsfiddle.net / 3e2y1j0s / 1. (Добавление отступа в 1 пиксель удваивает указанную высоту.)
 jvilhena08 июн. 2016 г., 16:54
не-jquery решение получает высоту содержимого элемента + оба поля, но игнорирует отступы и границы (и возможные полосы прокрутки) Jsfiddle.net / 3e2y1j0s / 3

но немного проще. Протестировал его в 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.

в и ярлыков здесь есть некоторые плюсовые сценарии, которые расширяют подходы измерения / 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')));

Element.getBoundingClientRect () возвращает объект DOMRect, который содержитheight (в том числеpadding & border) Window.getComputedStyle (элемент) возвращает объект со всеми свойствами 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>

Ваш ответ на вопрос