CODEWITHSUNDEEP
javascriptjquery
Anoop
Anoop

Reputation: 543

How to get the specified height of a div in javascript / jquery

I am drawing a chart

<canvas id="mychart" width="421" height="280" class="chartjs-render-monitor" style="display: block; width: 421px; height: 280px;"></canvas>

How do I get the height in javascript

Ihave tried this

var ctx = document.getElementById(params.placeHolder);
console.log(ctx.height)

It's returning 150 instead of 280

Upvotes: 0

Views: 49

Answers (2)

Grazielle Carvalho
Grazielle Carvalho

Reputation: 453

Using jQuery, try with:

$('#mychart').height();

With pure JS, try some of these:

var ctx = document.getElementById(params.placeHolder).clientHeight;
var ctx = document.getElementById(params.placeHolder).offsetHeight;
var ctx = document.getElementById(params.placeHolder).scrollHeight;

.scrollHeight

clientHeight includes the height and vertical padding.

offsetHeight includes the height, vertical padding, and vertical borders.

scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.

Got this last response here

Upvotes: 1

Aristeidis Karavas
Aristeidis Karavas

Reputation: 1956

You need to use the offsetHeight.

var ctx = document.getElementById("mychart");
console.log(ctx.offsetHeight)
<canvas id="mychart" width="421" height="280" class="chartjs-render-monitor" style="display: block; width: 421px; height: 280px;"></canvas>

Upvotes: 1

Related Questions