Get Div Height With Plain JavaScript

Get div height with plain JavaScript

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

or

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

clientHeight includes padding.

offsetHeight includes padding, scrollBar and borders.

How to write $(#content).height() in pure JavaScript?

Equalent to $('#content').height() would be :

document.getElementById('content').clientHeight;

or equalent to $('#content').css('height')

document.getElementById('content').style.height;

How do you get div height in pure javascript?

That will be the following:

document.querySelector(".div1").style.height = window.getComputedStyle(document.querySelector(".div2")).height;

Get height of div after content change in vanilla javascript

After change the content of your div, you can call a function to get the new height of your div.

this.staticPageService.getData('test').subscribe(payload => {
  this.divContent = payload.content;
  getHeightDiv('cookies-popup');
});


function getHeightDiv(idElem) {
  console.log(document.getElementById(idElem).getBoundingClientRect().height);
  return document.getElementById(idElem).getBoundingClientRect().height
}

Update

I don't now what is .divContent but I think you can use element.innerHTML instead.

If you need to use .divContent try to use setTimeout.

this.staticPageService.getData('test').subscribe(payload => {
  this.divContent = payload.content;
  setTimeout(() => getHeightDiv('cookies-popup'), 100);
});


function getHeightDiv(idElem) {
  console.log(document.getElementById(idElem).getBoundingClientRect().height);
  return document.getElementById(idElem).getBoundingClientRect().height
}

Getting div height

Depending on the browser of choice, one of these will do:

mydiv.offsetHeight
mydiv.clientHeight

Get full height of a clipped DIV

Getting the height of a div

How to get inner HTML content height

If it must be in vanilla JS...

var height = document.getElementById('content').clientHeight;

That will not include any borders or scrollbars in the element, just padding. If you want to include borders and scrollbars you may use offsetHeight instead.

How to get the height in pixels in pure javascript?

The property .clientHeight will return a number (the height in pixels).

In your case, below is the code to reset the height of div#main. Note that we're adding a "px" at the end for .style.height to work:

document.getElementById('main').style.height = parseInt(window.innerHeight) -document.getElementById('header').clientHeight + document.getElementById('footer').clientHeight + "px";

<div id="header">CONTENT</div><div id="main">CONTENT</div><div id="footer">CONTENT</div>

function equalHeight(className) {  var max = 0;  document.querySelectorAll(className).forEach(    function(el) {      console.info(Math.max(el.scrollHeight, max));      if (el.scrollHeight > max) {        max = el.scrollHeight;      }    }  );    return max;}
var max = equalHeight('.test');
console.info('Max div height:', max);

div {  border: 1px dashed red;  margin: 2px 0;}

<div class="test">one</div><div class="test">one<br/>two</div><div class="test">one<br/>two<br/>three</div>