Get div height with plain JavaScript

Question

Any ideas on how to get a div s height without using jQuery  I was searching Stack Overflow for this question and it seems like every answer is pointing to jQuery s  height    I tried something like myDiv style height  but it returned nothing  even when my div had its width and height set in CSS

User · Answer

The other answers weren t working for me  Here s what I found at w3schools  assuming the div has a height and or width set   All you need is height and width to exclude padding       var height   document getElementById  myDiv   style height      var width   document getElementById  myDiv   style width    You downvoters  This answer has helped at least 5 people  judging by the upvotes I ve received  If you don t like it  tell me why so I can fix it  That s my biggest pet peeve with downvotes  you rarely tell me why you downvote it

User · Answer

jsFiddle  var element   document getElementById  element    alert element offsetHeight

User · Answer

try   myDiv offsetHeight     x000D   x000D  console log  Height    myDiv offsetHeight    x000D   myDiv   width  100px  height  666px  background  red  x000D   lt div id  myDiv  gt  lt  div gt  x000D   x000D   x000D

User · Answer

One option would be  const styleElement   getComputedStyle document getElementById  myDiv     console log styleElement height

User · Answer

var myDiv   document getElementById  myDiv      get  myDiv alert myDiv clientHeight     clientHeight and clientWidth are what you are looking for   offsetHeight and offsetWidth also return the height and width but it includes the border and scrollbar  Depending on the situation  you can use one or the other   Hope this helps

User · Answer

var clientHeight   document getElementById  myDiv   clientHeight    or  var offsetHeight   document getElementById  myDiv   offsetHeight    clientHeight includes padding   offsetHeight includes padding  scrollBar and borders

User · Answer

In addition to el clientHeight and el offsetHeight  when you need the height of the content inside the element  regardless of the height set on the element itself  you can use el scrollHeight  more info  This can be useful if you want to set the element height or max-height to the exact height of it s internal dynamic content  For example   var el   document getElementById  myDiv    el style maxHeight   el scrollHeight  px

User · Answer

Here s one more alternative   var classElements   document getElementsByClassName  className     function setClassHeight  classElements  desiredHeightValue                 var arrayElements   Object entries classElements           for var i   0  i lt  arrayElements length  i                  arrayElements i  1  style height   desiredHeightValue

User · Answer

Another option is to use the getBoundingClientRect function   Please note that getBoundingClientRect will return an empty rect if the element s display is  none   Example  var elem   document getElementById  quot myDiv quot    if elem      var rect   elem getBoundingClientRect      console log  quot height   quot    rect height        UPDATE  Here is the same code written in 2020  const elem   document querySelector  quot  myDiv quot    if elem      const rect   elem getBoundingClientRect      console log  height    rect height

User · Answer

lt div id  item  gt show taille height lt  div gt   lt script gt      alert document getElementById  item   offsetHeight    lt  script gt    Jsfiddle

[javascript] Get div height with plain JavaScript

Examples related to javascript

Examples related to html

Examples related to css