Полная высота элемента HTML (отделение) включая границу, дополняя и поле?
Мне нужна полная высота отделения, я в настоящее время использую
document.getElementById('measureTool').offsetHeight
offsetHeight- Возвращает высоту элемента, включая границы и дополнение если таковые имеются, но не поля
Но один из вложенных элементов в отделении, имеет a margin-top из 20%, таким образом, я получаю неправильное измерение. Я попробовал style.marginTop и scrollHeight без успеха.
Как я могу получить полную высоту (граница, дополнение, поле) элемента (отделение) в JavaScript?
Если нет никакого другого пути, я соглашаюсь с jQuery.
3 ответа
Более ранние решения, вероятно, идеальны. В поисках простого способа я придумал что-то как этот. Это переносит цель в 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;
Используйте все опоры, поле, границу, дополнение и высоту в последовательности.
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 записал хорошее решение , однако я думаю, что 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)
}