Wie tatsächliche Höhe ohne 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>

Wie Sie zu sehen bekommen, ist der Inhalt in test div overflow und mehr als 30px: so, wie genau die Höhe zu bekommen?

Answer 1

Versuchen Sie folgendes:

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

Answer 2

Versuch:

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

Answer 3

bereits.

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>

versuchen scrollHeight

Answer 5

Sie können entweder .clientHeight oder .offsetHeight; verwenden.

Was ist der Unterschied?

.clientHeight enthält Auffüllen.

.offsetHeight enthält Füllung, Bildlaufleiste und Rahmen.

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>