html - Lấy chiều cao của div bằng JavaScript thuần túy

Có ai có ý tưởng nào về cách lấy chiều cao của một div mà không sử dụng jQuery không?

Tôi đã tìm kiếm câu hỏi này trên Stack Overflow và có vẻ như mọi câu trả lời đều chỉ về .height() của jQuery.

Tôi đã thử một thứ gì đó như myDiv.style.height, nhưng nó không trả về gì, ngay cả khi div của tôi đã được đặt width và height trong CSS.

Câu trả lời #1

var clientHeight = document.getElementById('myDiv').clientHeight;

hoặc

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight bao gồm phần đệm.

offsetHeight bao gồm phần đệm (padding), thanh cuộn (scrollBar) và các đường viền (borders).

Câu trả lời #2

Một lựa chọn khác là sử dụng hàm getBoundingClientRect. Xin lưu ý rằng getBoundingClientRect sẽ trả về một hình chữ nhật trống nếu thuộc tính hiển thị của phần tử là 'none'.

Ví dụ :

var elem = document.getElementById("myDiv");
if(elem) {
  var rect = elem.getBoundingClientRect();
  console.log("height: " + rect.height);  
}

CẬP NHẬT: Đây là cùng một mã được viết vào năm 2020:

const elem = document.querySelector("#myDiv");
if(elem) {
  const rect = elem.getBoundingClientRect();
  console.log(`height: ${rect.height}`);
}

Câu trả lời #3

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);

Câu trả lời #4

HTMLElement.style - trả về Style đã được định nghĩa của phần tử
chiều cao client - chiều cao + lề
chiều cao bù - chiều cao + đệm + viền
scrollHeight - trả về chiều cao + padding
getBoundingClientRect() - trả về các thuộc tính left, top, right, bottom, x, y, width và height
getComputedStyle() - trả về tất cả các thuộc tính CSS của một phần tử

// returns defined Style of element
const styleHeight = document.getElementById('myDiv').style.height;
console.log('style Height : ', styleHeight);

// height + padding
const clientHeight = document.getElementById('myDiv').clientHeight;
console.log('client Height : ', clientHeight);

// height + padding + borders
const offsetHeight = document.getElementById('myDiv').offsetHeight;
console.log('offset Height : ', offsetHeight);

// height + padding
const scrollHeight = document.getElementById('myDiv').scrollHeight;
console.log('scroll Height : ', scrollHeight);

// return left, top, right, bottom, x, y, width, and height properties
const getBoundingClientRectHeight = document.getElementById('myDiv').getBoundingClientRect().height;
console.log('get Bounding Client Rect Height : ', getBoundingClientRectHeight);

// returns all CSS properties of an element
const styleElementHeight = getComputedStyle(document.getElementById("myDiv")).height;
console.log('style Element Height : ', styleElementHeight);

<div id="myDiv" style="margin:10px;padding:20px;height:200px;">
    <input type="Text">
    <input type="button" value="submit">
</div>

Câu trả lời số 5

var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

clientHeight và clientWidth là những gì bạn đang tìm kiếm.

offsetHeight và offsetWidth cũng trả về chiều cao và chiều rộng nhưng nó bao gồm cả viền và thanh cuộn. Tùy vào tình huống, bạn có thể sử dụng cái này hoặc cái kia.