Javascript get element height and width, with div, ul li and width/height defined in Css

Sometimes you need to know the width or height of element (such as div or ul li). In most cases, you can get the width or height attribute of the element with javascript. But sometimes this method may not work, and the width or height of element is defined in the Css style. They cannot be got in this method. How should this be done?

Javascript provides a method to get the width and height of the element from Css. Because the got object is more complicated, it can not be completed by one method. It needs several methods to get it. See the following example for details.

I. Javascript get element height and width

html code:

<div id="divId" style="width:450px; height:35px;" class="div">Javascript get width of element, for example: How to get width of div in javascript. Javascript get height of element, e.g. How to get div height in javascript.</div>

Css:

.div{ margin:80px 0px; position:relative; border:1px solid #7e7d7d; width:420px; height:32px; line-height:33px;}

Javascript code:

<script type="text/javascript">
       function getWidthOfDiv(obj) {
              var div = document.getElementById(obj);
              return div.style.width;
       }

function getHeightOfDiv(obj) {
              var div = document.getElementById(obj);
              return div.style.height;
       }
       </script>

1. How to get width of div in javascript

document.write(getWidthOfDiv("divId"));

Output result: 420

2. How to get div height in javascript

document.write(getHeightOfDiv("divId"));

Output result: 35

The output is the width and height defined in the style attribute of div, not the width and height defined in the Css. If the style attribute of div is removed, the output will be blank, which means that the width and height defined in the Css cannot be got.

II. Javascript get element height and width defined in the Css

html code:

<div id="divId" class="div">Javascript get element height and width defined in the Css, e.g. get width and height of div in javascript.</div>

Css:

.div{ margin:80px 0px; position:relative; border:1px solid #7e7d7d; width:420px; height:32px; line-height:33px;}

Javascript code:

<script type="text/javascript">
       function getHeightAndWidthDefinedInCss(obj, propertyName) {
              if (arguments.length != 2) { return false; }

       element = document.getElementById(obj);
              var value = element.style[replaceStyle(propertyName)];
              if (!value) {
                     if (document.defaultView && document.defaultView.getComputedStyle) {
                            var css = document.defaultView.getComputedStyle(element, null);
                            value = css ? css.getPropertyValue(propertyName) : null;
                     }
                     else if (element.currentStyle) {
                            value = element.currentStyle[replaceStyle(propertyName)];
                     }
              }
              return value == 'auto' ? '' : value;
       }
       function replaceStyle(s) { return s.replace(/-(\w)/g, function (strMatch,t) { return t.toUpperCase(); }); }
       document.write(getHeightAndWidthDefinedInCss("divId", "width"));
       </script>

Output result: 420px

The output(420px) is the width of the div defined in the Css. One thing to note is that if the style attribute is used for div and the width is set, the width in the style will be output because it has a higher priority than the Css file.

The above two methods to get the width or height of an element are not fixed to get the width or height of an element, so to get the width or height of ul li, just pass their ids as parameters to the getHeightAndWidthDefinedInCss method.