如何獲得實際高度不jQuery的

Question

var test = document.getElementById('test'); 
 
console.log(test.offsetHeight);

<div style="height: 30px;" id="test"> 
 
    <p>ffffffffff</p> 
 
    <p>gggggggggg</p> 
 
    <p>aaaaaaaaaa</p> 
 
    <p>dddddddddd</p> 
 
</div>

正如你所看到的，在 test div的內容是 overflow和超過 30px：那麼如何才能得到準確的高度？

Answer 1

試試這個：

window.getComputedStyle(document.getElementById('test')).height 

Answer 2

嘗試：

var test = document.getElementById('test'); 
alert(test.clientHeight); 

Answer 3

試試這個。

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

Answer 4

var test = document.getElementById('test'); 
 
alert(test.scrollHeight);

<div style="height: 30px;" id="test"> 
 
    <p>ffffffffff</p> 
 
    <p>gggggggggg</p> 
 
    <p>aaaaaaaaaa</p> 
 
    <p>dddddddddd</p> 
 
</div>

嘗試scrollHeight

Answer 5

您可以使用.clientHeight或.offsetHeight;。

有什麼區別？

.clientHeight包括填充。

.offsetHeight包括填充，滾動條和邊框。

var clientH = document.getElementById('test').clientHeight; 
 
var offsetH = document.getElementById('test').offsetHeight; 
 

 

 
console.log(clientH); 
 
console.log(offsetH);

<div style="height: 30px;" id="test"> 
 
    <p>ffffffffff</p> 
 
    <p>gggggggggg</p> 
 
    <p>aaaaaaaaaa</p> 
 
    <p>dddddddddd</p> 
 
</div>