js如何获取div（ul li）元素的宽度和高度（包括width/height和CSS的宽度和高度）

某些时候需要知道元素div（或 ul li）的宽度或高度，大多情况下可以用js取元素div的width或height属性获得，但有时候这个方法不一定奏效，把div的宽度或高度定义在CSS样式中，这个方法就取不到，这种情况应该如何取？

javascript提供了从CSS中获取元素宽度和高度的方法，由于获取的对象比较复杂，所以单用一个方法不能完成，需要用几个方法才获取到，具体看下面的实例。

一、js直接获取div（ul li）元素的宽度和高度

html代码：

<div id="divId" style="width:450px; height:35px;" class="div">js获取div高度或宽度</div>

CSS代码：

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

javascript代码：

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

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

1、获取div的宽度（长度）

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

输出结果：420

2、获取div的高度

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

输出结果：35

输出的正是 div 的 style 属性中定义的宽度和高度，而不是CSS中定义的宽度和高度。如果把 div 的 style 属性去掉，将输出空白，也就是获取不到 CSS 中定义的宽度和高度。

二、js获取CSS样式中定义的div（ul li）元素的宽度和高度

html代码：

<div id="divId" class="div">js获取CSS样式中定义的div（ul li）元素的宽度和高度</div>

CSS代码：

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

javascript代码：

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

  element = document.getElementById(obj);
    var value = element.style[replaceCss(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[replaceCss(propertyName)];
      }
    }
    return value == 'auto' ? '' : value;
  }
  function replaceCss(s) { return s.replace(/-(\w)/g, function (strMatch,t) { return t.toUpperCase(); }); }
  document.write(getCssStyle("divId", "width"));
  </script>

输出结果：420px

输出的 420px 正是CSS中定义的 div 的宽度，有一点需要注意，如果 div 中用了 style 属性又定了宽度，则会输出 style 中的宽度，因为它的优先级高于CSS文件。

以上两个获取元素宽度或高度的方法并没有定死获取某一个元素的宽度或高度，所以要获取 ul li 的宽度或高度，把它们的id作为参数传给 js 方法即可。