How do I retrieve an HTML element s actual width and height

Question

Suppose that I have a  lt div gt  that I wish to center in the browser s display  viewport   To do so  I need to calculate the width and height of the  lt div gt  element    What should I use  Please include information on browser compatibility

User · Answer

You only need to calculate it for IE7 and older (and only if your content doesn't have fixed size). I suggest using HTML conditional comments to limit hack to old IEs that don't support CSS2. For all other browsers use this:

<style type="text/css">
    html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
    body {display:table-cell; vertical-align:middle;}
    div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>

This is the perfect solution. It centers <div> of any size, and shrink-wraps it to size of its content.

User · Answer

seems CSS help to put div on center       lt style gt    monitor    position fixed        absolute possible if on  root     top 0 bottom 0 right 0 left 0   visibility hidden       wrapper    width 200px    this is size range     height 100px   position absolute   left 50  top 50    visibility hidden        content    position absolute   width  100  height 100    left -50  top -50    visibility visible       lt  style gt     lt div class  monitor  gt     lt div class  wrapper  gt      lt div class  content  gt        so you hav div 200px 100px on center         lt  div gt    lt  div gt   lt  div gt

User · Answer

Take a look at Element getBoundingClientRect     This method will return an object containing the width  height  and some other useful values         width  960      height  71      top  603      bottom  674      left  360      right  1320     For Example   var element   document getElementById  foo    var positionInfo   element getBoundingClientRect    var height   positionInfo height  var width   positionInfo width    I believe this does not have the issues that  offsetWidth and  offsetHeight do where they sometimes return 0  as discussed in the comments here   Another difference is getBoundingClientRect   may return fractional pixels  where  offsetWidth and  offsetHeight will round to the nearest integer   IE8 Note  getBoundingClientRect does not return height and width on IE8 and below    If you must support IE8  use  offsetWidth and  offsetHeight   var height   element offsetHeight  var width   element offsetWidth    Its worth noting that the Object returned by this method is not really a normal object  Its properties are not enumerable  so  for example  Object keys doesn t work out-of-the-box    More info on this here  How best to convert a ClientRect   DomRect into a plain Object  Reference     offsetHeight  https   developer mozilla org en-US docs Web API HTMLElement offsetHeight  offsetWidth  https   developer mozilla org en-US docs Web API HTMLElement offsetWidth  getBoundingClientRect    https   developer mozilla org en-US docs Web API Element getBoundingClientRect

User · Answer

Just in case it is useful to anyone  I put a textbox  button and div all with the same css   width 200px  height 20px  border solid 1px  000  padding 2px    lt input id  t  type  text    gt   lt input id  b  type  button    gt   lt div   id  d  gt  lt  div gt    I tried it in chrome  firefox and ie-edge  I tried with jquery and without  and I tried it with and without box-sizing border-box  Always with  lt  DOCTYPE html gt   The results                                                                  Firefox       Chrome        IE-Edge                                                                   with   w o    with   w o    with   w o     box-sizing      t   width                                                 194    200    194    200    194    200     b   width                                                 194    194    194    194    194    194     d   width                                                 194    200    194    200    194    200      t   outerWidth                                            200    206    200    206    200    206     b   outerWidth                                            200    200    200    200    200    200     d   outerWidth                                            200    206    200    206    200    206      t   innerWidth                                            198    204    198    204    198    204     b   innerWidth                                            198    198    198    198    198    198     d   innerWidth                                            198    204    198    204    198    204      t   css  width                                            200px  200px  200px  200px  200px  200px     b   css  width                                            200px  200px  200px  200px  200px  200px     d   css  width                                            200px  200px  200px  200px  200px  200px      t   css  border-left-width                                1px    1px    1px    1px    1px    1px     b   css  border-left-width                                1px    1px    1px    1px    1px    1px     d   css  border-left-width                                1px    1px    1px    1px    1px    1px      t   css  padding-left                                     2px    2px    2px    2px    2px    2px     b   css  padding-left                                     2px    2px    2px    2px    2px    2px     d   css  padding-left                                     2px    2px    2px    2px    2px    2px  document getElementById  t   getBoundingClientRect   width    200    206    200    206    200    206 document getElementById  b   getBoundingClientRect   width    200    200    200    200    200    200 document getElementById  d   getBoundingClientRect   width    200    206    200    206    200    206  document getElementById  t   offsetWidth                      200    206    200    206    200    206 document getElementById  b   offsetWidth                      200    200    200    200    200    200 document getElementById  d   offsetWidth                      200    206    200    206    200    206

User · Answer

element offsetWidth and element offsetHeight should do  as suggested in previous post    However  if you just want to center the content  there is a better way of doing so  Assuming you use xhtml strict DOCTYPE  set the margin 0 auto property and required width in px to the body tag  The content gets center aligned to the page

User · Answer

Take a look at Element getBoundingClientRect     This method will return an object containing the width  height  and some other useful values         width  960      height  71      top  603      bottom  674      left  360      right  1320     For Example   var element   document getElementById  foo    var positionInfo   element getBoundingClientRect    var height   positionInfo height  var width   positionInfo width    I believe this does not have the issues that  offsetWidth and  offsetHeight do where they sometimes return 0  as discussed in the comments here   Another difference is getBoundingClientRect   may return fractional pixels  where  offsetWidth and  offsetHeight will round to the nearest integer   IE8 Note  getBoundingClientRect does not return height and width on IE8 and below    If you must support IE8  use  offsetWidth and  offsetHeight   var height   element offsetHeight  var width   element offsetWidth    Its worth noting that the Object returned by this method is not really a normal object  Its properties are not enumerable  so  for example  Object keys doesn t work out-of-the-box    More info on this here  How best to convert a ClientRect   DomRect into a plain Object  Reference     offsetHeight  https   developer mozilla org en-US docs Web API HTMLElement offsetHeight  offsetWidth  https   developer mozilla org en-US docs Web API HTMLElement offsetWidth  getBoundingClientRect    https   developer mozilla org en-US docs Web API Element getBoundingClientRect

User · Answer

seems CSS help to put div on center       lt style gt    monitor    position fixed        absolute possible if on  root     top 0 bottom 0 right 0 left 0   visibility hidden       wrapper    width 200px    this is size range     height 100px   position absolute   left 50  top 50    visibility hidden        content    position absolute   width  100  height 100    left -50  top -50    visibility visible       lt  style gt     lt div class  monitor  gt     lt div class  wrapper  gt      lt div class  content  gt        so you hav div 200px 100px on center         lt  div gt    lt  div gt   lt  div gt

User · Answer

You should use the  offsetWidth and  offsetHeight properties  Note they belong to the element  not  style   var width   document getElementById  foo   offsetWidth   Function  getBoundingClientRect   returns dimensions and location of element as floating-point numbers after performing CSS transforms    gt  console log document getElementById  id   getBoundingClientRect    DOMRect       bottom  177      height  54 7      left  278 5       right  909 5      top  122 3      width  631      x  278 5      y  122 3

User · Answer

You only need to calculate it for IE7 and older (and only if your content doesn't have fixed size). I suggest using HTML conditional comments to limit hack to old IEs that don't support CSS2. For all other browsers use this:

<style type="text/css">
    html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
    body {display:table-cell; vertical-align:middle;}
    div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>

This is the perfect solution. It centers <div> of any size, and shrink-wraps it to size of its content.

User · Answer

If offsetWidth returns 0  you can get element s style width property and search it for a number   100px  -  100    d   exec MyElement style width

User · Answer

You should use the  offsetWidth and  offsetHeight properties  Note they belong to the element  not  style   var width   document getElementById  foo   offsetWidth   Function  getBoundingClientRect   returns dimensions and location of element as floating-point numbers after performing CSS transforms    gt  console log document getElementById  id   getBoundingClientRect    DOMRect       bottom  177      height  54 7      left  278 5       right  909 5      top  122 3      width  631      x  278 5      y  122 3

User · Answer

Flex In case that you want to display in your  lt div gt  some kind of popUp message on screen center  - then you don t need to read size of  lt div gt  but you can use flex  x000D   x000D   box     width  50px    height  20px    background  red      container     display  flex    justify-content  center    align-items  center    height  100vh    width  100vw    position  fixed     remove this in case there is no content under div  and remember to set body margins to 0      x000D   lt div class  container  gt     lt div class  box  gt My div lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

It is easy to modify the elements styles but kinda tricky to read the value   JavaScript can t read any element style property  elem style  coming from css internal external  unless you use the built in method call getComputedStyle in javascript      getComputedStyle element   pseudo     Element  The element to read the value for  pseudo  A pseudo-element if required  for instance   before  An empty string or no argument means the element itself   The result is an object with style properties  like elem style  but now with respect to all css classes   For instance  here style doesn   t see the margin    lt head gt     lt style gt  body   color  red  margin  5px    lt  style gt   lt  head gt   lt body gt      lt script gt      let computedStyle   getComputedStyle document body           now we can read the margin and the color from it      alert  computedStyle marginTop       5px     alert  computedStyle color       rgb 255  0  0     lt  script gt    lt  body gt    So modified your javaScript code to include the getComputedStyle of the element you wish to get it s width height or other attribute  window onload   function          var test   document getElementById  test        test addEventListener  click   select         function select e                                              var elementID   e target id          var element   document getElementById elementID           let computedStyle   getComputedStyle element           var width   computedStyle width          console log element           console log width              Computed and resolved values  There are two concepts in CSS      A computed style value is the value after all CSS rules and CSS   inheritance is applied  as the result of the CSS cascade  It can look   like height 1em or font-size 125        A resolved style value is the one finally applied to the element    Values like 1em or 125  are relative  The browser takes the computed   value and makes all units fixed and absolute  for instance    height 20px or font-size 16px  For geometry properties resolved values   may have a floating point  like width 50 5px    A long time ago getComputedStyle was created to get computed values  but it turned out that resolved values are much more convenient  and the standard changed  So nowadays getComputedStyle actually returns the resolved value of the property   Please Note   getComputedStyle requires the full property name     You should always ask for the exact property that you want  like   paddingLeft or height or width  Otherwise the correct   result is not guaranteed       For instance  if there are properties paddingLeft paddingTop  then   what should we get for getComputedStyle elem  padding  Nothing  or   maybe a    generated    value from known paddings  There   s no standard   rule here    There are other inconsistencies  As an example  some browsers  Chrome  show 10px in the document below  and some of them  Firefox      do not    lt style gt    body       margin  30px      height  900px       lt  style gt   lt script gt    let style   getComputedStyle document body     alert style margin      empty string in Firefox  lt  script gt    for more information https   javascript info styles-and-classes

User · Answer

Use width param as follows     style          width   quot 80  quot         paddingLeft  100        paddingRight  200        paddingTop  30        paddingBottom  30        border   quot 3px solid lightGray quot

User · Answer

also you can use this code   var divID   document getElementById  divid     var h   divID style pixelHeight

User · Answer

NOTE  this answer was written in 2008  At the time the best cross-browser solution for most people really was to use jQuery  I m leaving the answer here for posterity and  if you re using jQuery  this is a good way to do it  If you re using some other framework or pure JavaScript the accepted answer is probably the way to go   As of jQuery 1 2 6 you can use one of the core CSS functions  height and width  or outerHeight and outerWidth  as appropriate    var height       myDiv   height    var width       myDiv   width     var docHeight     document  height    var docWidth     document  width

User · Answer

element offsetWidth and element offsetHeight should do  as suggested in previous post    However  if you just want to center the content  there is a better way of doing so  Assuming you use xhtml strict DOCTYPE  set the margin 0 auto property and required width in px to the body tag  The content gets center aligned to the page

User · Answer

element offsetWidth and element offsetHeight should do  as suggested in previous post    However  if you just want to center the content  there is a better way of doing so  Assuming you use xhtml strict DOCTYPE  set the margin 0 auto property and required width in px to the body tag  The content gets center aligned to the page

User · Answer

Just in case it is useful to anyone  I put a textbox  button and div all with the same css   width 200px  height 20px  border solid 1px  000  padding 2px    lt input id  t  type  text    gt   lt input id  b  type  button    gt   lt div   id  d  gt  lt  div gt    I tried it in chrome  firefox and ie-edge  I tried with jquery and without  and I tried it with and without box-sizing border-box  Always with  lt  DOCTYPE html gt   The results                                                                  Firefox       Chrome        IE-Edge                                                                   with   w o    with   w o    with   w o     box-sizing      t   width                                                 194    200    194    200    194    200     b   width                                                 194    194    194    194    194    194     d   width                                                 194    200    194    200    194    200      t   outerWidth                                            200    206    200    206    200    206     b   outerWidth                                            200    200    200    200    200    200     d   outerWidth                                            200    206    200    206    200    206      t   innerWidth                                            198    204    198    204    198    204     b   innerWidth                                            198    198    198    198    198    198     d   innerWidth                                            198    204    198    204    198    204      t   css  width                                            200px  200px  200px  200px  200px  200px     b   css  width                                            200px  200px  200px  200px  200px  200px     d   css  width                                            200px  200px  200px  200px  200px  200px      t   css  border-left-width                                1px    1px    1px    1px    1px    1px     b   css  border-left-width                                1px    1px    1px    1px    1px    1px     d   css  border-left-width                                1px    1px    1px    1px    1px    1px      t   css  padding-left                                     2px    2px    2px    2px    2px    2px     b   css  padding-left                                     2px    2px    2px    2px    2px    2px     d   css  padding-left                                     2px    2px    2px    2px    2px    2px  document getElementById  t   getBoundingClientRect   width    200    206    200    206    200    206 document getElementById  b   getBoundingClientRect   width    200    200    200    200    200    200 document getElementById  d   getBoundingClientRect   width    200    206    200    206    200    206  document getElementById  t   offsetWidth                      200    206    200    206    200    206 document getElementById  b   offsetWidth                      200    200    200    200    200    200 document getElementById  d   offsetWidth                      200    206    200    206    200    206

User · Answer

If offsetWidth returns 0  you can get element s style width property and search it for a number   100px  -  100    d   exec MyElement style width

User · Answer

Here is the code for WKWebView what determines a height of specific Dom element  doesn t work properly for whole page   let html     lt body gt  lt span id   spanEl   style   font-family     taskFont fontName    font-size    taskFont pointSize - 4 0 pt  color  rgb   red     blue     green     gt   textValue  lt  span gt  lt  body gt   webView navigationDelegate   self webView loadHTMLString taskHTML  baseURL  nil   func webView   webView  WKWebView  didFinish navigation  WKNavigation         webView evaluateJavaScript  document getElementById   spanEl    getBoundingClientRect   height       weak self   response  error  in         if let nValue   response as  NSNumber

User · Answer

NOTE  this answer was written in 2008  At the time the best cross-browser solution for most people really was to use jQuery  I m leaving the answer here for posterity and  if you re using jQuery  this is a good way to do it  If you re using some other framework or pure JavaScript the accepted answer is probably the way to go   As of jQuery 1 2 6 you can use one of the core CSS functions  height and width  or outerHeight and outerWidth  as appropriate    var height       myDiv   height    var width       myDiv   width     var docHeight     document  height    var docWidth     document  width

User · Answer

Here is the code for WKWebView what determines a height of specific Dom element  doesn t work properly for whole page   let html     lt body gt  lt span id   spanEl   style   font-family     taskFont fontName    font-size    taskFont pointSize - 4 0 pt  color  rgb   red     blue     green     gt   textValue  lt  span gt  lt  body gt   webView navigationDelegate   self webView loadHTMLString taskHTML  baseURL  nil   func webView   webView  WKWebView  didFinish navigation  WKNavigation         webView evaluateJavaScript  document getElementById   spanEl    getBoundingClientRect   height       weak self   response  error  in         if let nValue   response as  NSNumber

User · Answer

Use width param as follows     style          width   quot 80  quot         paddingLeft  100        paddingRight  200        paddingTop  30        paddingBottom  30        border   quot 3px solid lightGray quot

User · Answer

According to MDN  Determining the dimensions of elements  offsetWidth and offsetHeight return the  total amount of space an element occupies  including the width of the visible content  scrollbars  if any   padding  and border   clientWidth and clientHeight return  how much space the actual displayed content takes up  including padding but not including the border  margins  or scrollbars   scrollWidth and scrollHeight return the  actual size of the content  regardless of how much of it is currently visible   So it depends on whether the measured content is expected to be out of the current viewable area

User · Answer

Flex In case that you want to display in your  lt div gt  some kind of popUp message on screen center  - then you don t need to read size of  lt div gt  but you can use flex  x000D   x000D   box     width  50px    height  20px    background  red      container     display  flex    justify-content  center    align-items  center    height  100vh    width  100vw    position  fixed     remove this in case there is no content under div  and remember to set body margins to 0      x000D   lt div class  container  gt     lt div class  box  gt My div lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

element offsetWidth and element offsetHeight should do  as suggested in previous post    However  if you just want to center the content  there is a better way of doing so  Assuming you use xhtml strict DOCTYPE  set the margin 0 auto property and required width in px to the body tag  The content gets center aligned to the page

User · Answer

You only need to calculate it for IE7 and older (and only if your content doesn't have fixed size). I suggest using HTML conditional comments to limit hack to old IEs that don't support CSS2. For all other browsers use this:

<style type="text/css">
    html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
    body {display:table-cell; vertical-align:middle;}
    div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>

This is the perfect solution. It centers <div> of any size, and shrink-wraps it to size of its content.

User · Answer

also you can use this code   var divID   document getElementById  divid     var h   divID style pixelHeight

User · Answer

It is easy to modify the elements styles but kinda tricky to read the value   JavaScript can t read any element style property  elem style  coming from css internal external  unless you use the built in method call getComputedStyle in javascript      getComputedStyle element   pseudo     Element  The element to read the value for  pseudo  A pseudo-element if required  for instance   before  An empty string or no argument means the element itself   The result is an object with style properties  like elem style  but now with respect to all css classes   For instance  here style doesn   t see the margin    lt head gt     lt style gt  body   color  red  margin  5px    lt  style gt   lt  head gt   lt body gt      lt script gt      let computedStyle   getComputedStyle document body           now we can read the margin and the color from it      alert  computedStyle marginTop       5px     alert  computedStyle color       rgb 255  0  0     lt  script gt    lt  body gt    So modified your javaScript code to include the getComputedStyle of the element you wish to get it s width height or other attribute  window onload   function          var test   document getElementById  test        test addEventListener  click   select         function select e                                              var elementID   e target id          var element   document getElementById elementID           let computedStyle   getComputedStyle element           var width   computedStyle width          console log element           console log width              Computed and resolved values  There are two concepts in CSS      A computed style value is the value after all CSS rules and CSS   inheritance is applied  as the result of the CSS cascade  It can look   like height 1em or font-size 125        A resolved style value is the one finally applied to the element    Values like 1em or 125  are relative  The browser takes the computed   value and makes all units fixed and absolute  for instance    height 20px or font-size 16px  For geometry properties resolved values   may have a floating point  like width 50 5px    A long time ago getComputedStyle was created to get computed values  but it turned out that resolved values are much more convenient  and the standard changed  So nowadays getComputedStyle actually returns the resolved value of the property   Please Note   getComputedStyle requires the full property name     You should always ask for the exact property that you want  like   paddingLeft or height or width  Otherwise the correct   result is not guaranteed       For instance  if there are properties paddingLeft paddingTop  then   what should we get for getComputedStyle elem  padding  Nothing  or   maybe a    generated    value from known paddings  There   s no standard   rule here    There are other inconsistencies  As an example  some browsers  Chrome  show 10px in the document below  and some of them  Firefox      do not    lt style gt    body       margin  30px      height  900px       lt  style gt   lt script gt    let style   getComputedStyle document body     alert style margin      empty string in Firefox  lt  script gt    for more information https   javascript info styles-and-classes

User · Answer

You should use the  offsetWidth and  offsetHeight properties  Note they belong to the element  not  style   var width   document getElementById  foo   offsetWidth   Function  getBoundingClientRect   returns dimensions and location of element as floating-point numbers after performing CSS transforms    gt  console log document getElementById  id   getBoundingClientRect    DOMRect       bottom  177      height  54 7      left  278 5       right  909 5      top  122 3      width  631      x  278 5      y  122 3

User · Answer

You only need to calculate it for IE7 and older (and only if your content doesn't have fixed size). I suggest using HTML conditional comments to limit hack to old IEs that don't support CSS2. For all other browsers use this:

<style type="text/css">
    html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
    body {display:table-cell; vertical-align:middle;}
    div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>

This is the perfect solution. It centers <div> of any size, and shrink-wraps it to size of its content.

User · Answer

According to MDN  Determining the dimensions of elements  offsetWidth and offsetHeight return the  total amount of space an element occupies  including the width of the visible content  scrollbars  if any   padding  and border   clientWidth and clientHeight return  how much space the actual displayed content takes up  including padding but not including the border  margins  or scrollbars   scrollWidth and scrollHeight return the  actual size of the content  regardless of how much of it is currently visible   So it depends on whether the measured content is expected to be out of the current viewable area

User · Answer

You should use the  offsetWidth and  offsetHeight properties  Note they belong to the element  not  style   var width   document getElementById  foo   offsetWidth   Function  getBoundingClientRect   returns dimensions and location of element as floating-point numbers after performing CSS transforms    gt  console log document getElementById  id   getBoundingClientRect    DOMRect       bottom  177      height  54 7      left  278 5       right  909 5      top  122 3      width  631      x  278 5      y  122 3

User · Answer

NOTE  this answer was written in 2008  At the time the best cross-browser solution for most people really was to use jQuery  I m leaving the answer here for posterity and  if you re using jQuery  this is a good way to do it  If you re using some other framework or pure JavaScript the accepted answer is probably the way to go   As of jQuery 1 2 6 you can use one of the core CSS functions  height and width  or outerHeight and outerWidth  as appropriate    var height       myDiv   height    var width       myDiv   width     var docHeight     document  height    var docWidth     document  width

User · Answer

NOTE  this answer was written in 2008  At the time the best cross-browser solution for most people really was to use jQuery  I m leaving the answer here for posterity and  if you re using jQuery  this is a good way to do it  If you re using some other framework or pure JavaScript the accepted answer is probably the way to go   As of jQuery 1 2 6 you can use one of the core CSS functions  height and width  or outerHeight and outerWidth  as appropriate    var height       myDiv   height    var width       myDiv   width     var docHeight     document  height    var docWidth     document  width

[javascript] How do I retrieve an HTML element's actual width and height?

Examples related to javascript

Examples related to html

Examples related to dhtml