CODEWITHSUNDEEP
javascripthtmlcss
user3345456
user3345456

Reputation: 41

How to get actual height without jQuery

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>
As you can see, the content in test div is overflow and more than 30px: so how to get accurate height?

Upvotes: 2

Views: 1085

Answers (5)

loelsonk
loelsonk

Reputation: 3598

You can use either .clientHeight or .offsetHeight;.

What is the difference?

.clientHeight includes padding.

.offsetHeight includes padding, scrollBar and borders.

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>

Upvotes: 1

Durga
Durga

Reputation: 15604

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>

try scrollHeight

Upvotes: 2

Vivek ab
Vivek ab

Reputation: 680

Try this.

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

Upvotes: 0

Marthijn1994
Marthijn1994

Reputation: 1

try:

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

Upvotes: 0

喝茶的螃蟹
喝茶的螃蟹

Reputation: 144

Try this:

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

Upvotes: 0

Related Questions