Nhận chiều cao div với JavaScript đơn giản

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

Tôi đã tìm kiếm Stack Overflow cho câu hỏi này và dường như mọi câu trả lời đều trỏ đến jQuery .height().

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

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

hoặc là

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

clientHeight bao gồm đệm.

offsetHeight bao gồm đệm, scrollBar và viền.

jsFiddle

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

Một tùy chọn khác là sử dụng hàm getBoundingClientRect. Xin lưu ý rằng getBoundingClientRect sẽ trả về một chỉnh lưu trống nếu màn hình của phần tử là 'none'.

Thí dụ:

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

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 đường viền và thanh cuộn. Tùy thuộc vào tình huống, bạn có thể sử dụng cái này hay cái khác.

Hi vọng điêu nay co ich.

Các câu trả lời khác không làm việc cho tôi. Đây là những gì tôi tìm thấy ở w3schools , giả sử divcó một heightvà / hoặc widthbộ.

Tất cả bạn cần là heightvà widthđể loại trừ đệm.

    var height = document.getElementById('myDiv').style.height;
    var width = document.getElementById('myDiv').style.width;

Bạn downvoters: Câu trả lời này đã giúp ít nhất 5 người, đánh giá bằng các upvote tôi đã nhận được. Nếu bạn không thích nó, hãy cho tôi biết lý do tại sao tôi có thể sửa nó. Đó là thú cưng lớn nhất của tôi với downvote; bạn hiếm khi nói với tôi tại sao bạn downvote nó.

<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

Ngoài el.clientHeightvà el.offsetHeight, khi bạn cần chiều cao của nội dung bên trong phần tử (bất kể chiều cao được đặt trên chính phần tử đó), bạn có thể sử dụng el.scrollHeight. thêm thông tin

Điều này có thể hữu ích nếu bạn muốn đặt chiều cao phần tử hoặc chiều cao tối đa thành chiều cao chính xác của nội dung động bên trong của nó. Ví dụ:

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'

thử

myDiv.offsetHeight 

console.log("Height:", myDiv.offsetHeight );

#myDiv { width: 100px; height: 666px; background: red}

<div id="myDiv"></div>

Đây là một thay thế nữa:

var classElements = document.getElementsByClassName("className");

function setClassHeight (classElements, desiredHeightValue) 
    {
        var arrayElements = Object.entries(classElements);
        for(var i = 0; i< arrayElements.length; i++) {
            arrayElements[i][1].style.height = desiredHeightValue;
        }

    }

Một lựa chọn sẽ là

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);