Chiều cao đầy đủ của phần tử html (div) bao gồm đường viền, đệm và lề?

Question

tôi cần chiều cao đầy đủ của một div, Tôi hiện đang sử dụng

document.getElementById('measureTool').offsetHeight 

offsetHeight - Trả về chiều cao của một phần tử, trong đó có biên giới và đệm nếu có, nhưng không phải lề

Nhưng một trong các phần tử lồng nhau bên trong div, có một số margin-top của 20%, vì vậy tôi nhận được phép đo sai. Tôi đã thử style.marginTop và scrollHeight mà không thành công.

Làm cách nào để có được chiều cao đầy đủ (viền, đệm, lề) của phần tử (div) trong javascript?

Nếu không có cách nào khác, tôi đồng ý với jQuery.

Answer 1

Nếu bạn có thể sử dụng jQuery:

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

jQuery docs

Đối với vani javascript bạn cần phải viết nhiều hơn nữa (như mọi khi ...):

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

Còn thứ gì đó như thế này (không có jquery)? Nó tương tự như câu trả lời của @ gdoron nhưng đơn giản hơn một chút. Thử nghiệm nó trong IE9 +, Firefox và 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); 
} 

Đây là working jsfiddle.

Answer 3

cũ - dù sao ... cho tất cả jQuery-cấm và shortcut folks ra có ở đây là một số kịch bản cộng với đó mở rộng các phương pháp chiều/getabsoluteheight các câu trả lời khác:

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 4

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/

Tôi nghĩ giải pháp này dễ đọc hơn, nhưng không có giải pháp nào được trình bày cho các kích thước không phải là pixel ... :(

Answer 5

Một giải pháp chức năng khác sử dụng 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);