获取元素的宽和高

1、获取窗口的文档显示区的宽度和高度。

//包含滚动条
window.innerHeight
window.innerWidth
//不包含滚动条
document.documentElement.clientHeight
document.documentElement.clientWidth

2、获取document的宽度和高度

//name: width/height
function getWidthOrHeight(name){
  doc = document.documentElement;
  // Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height],
  // whichever is greatest
  return Math.max(
    document.body[ "scroll" + name ], doc[ "scroll" + name ],
    document.body[ "offset" + name ], doc[ "offset" + name ],
    doc[ "client" + name ]
  );
}

3、获取element的宽度和高度

//elem: 计算样式的元素; name: width/height
function getWidthOrHeight(elem, name){
  var view = elem.ownerDocument.defaultView;
  if ( !view || !view.opener ) {
    view = window;
  }
  var computed = view.getComputedStyle( elem );
  ret = computed.getPropertyValue( name ) || computed[ name ];
  if ( ret === "auto" ) {
        ret = elem[ "offset" + name[ 0 ].toUpperCase() + name.slice( 1 ) ];
    };
    return ret;
}

elem.style：js只能从这个属性获取写在html标签中style属性中的值style="..."，而无法获取定义在<style type="text/css">...<style>里面的属性的值。
因此可以使用getComputedStyle()方法。这个方法接受两个参数：要计算样式的元素和一个伪元素字符串（例如":after"）。如果不需要伪元素信息，第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。