JavaScript获取元素尺寸和大小操作总结

一、获取元素的行内样式

代码如下:
var obj = document.getElementById("test");
alert(obj.height + "/n" + obj.width);
// 200px 200px typeof=string只是将style属性中的值显示出来

二、获取计算后的样式

代码如下:
var obj = document.getElementById("test");
var style = null;
if (window.getComputedStyle) {
    style = window.getComputedStyle(obj, null);    // 非IE
} else {
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "/nheight=" + style.height);

注意：如果不设置元素的宽度和高度，那么在非IE浏览器下返回默认的宽度和高度。在IE下面返回auto字符串

三、获取<link>和<style>标签写入的样式

代码如下:
var obj = document.styleSheets[0]; // [object StyleSheetList] 样式表的个数<link>var rule = null;// [object CSSRule]
if (obj.cssRules){
    rule = obj.cssRules[0];  // 非IE [object CSSRuleList]
} else {
    rule = obj.rules[0];     // IE [object CSSRuleList]
}
alert(rule.style.width);

cssRules(或rules)只能获取到内联和链接样式的宽和高，不能获取到行内和计算后的样式。

总结：以上的三种CSS获取元素大小的方法，只能获取元素的CSS大小，却无法获取元素本身实际的大小。比如加上了内边距、滚动条、边框之类的。

四、获取元素的实际大小

1. clientWidth和clientHeight
    这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em之类，它还是会返回px的大小。(CSS获取的话，是照着你设置的样式获取)。对于元素的实际大小，clientWidth和clientHeight理解方式如下：
    a. 增加边框，无变化；
    b. 增加外边距，无变化；
    c. 增加滚动条，最终值等于原本大小减去滚动条的大小；
    d. 增加内边距，最终值等于原本大小加上内边距的大小；

代码如下:
<div id="test"></div>
#test{
    background-color: green;
    width: 200px;
    height: 200px;
    border: solid 5px red;  /* 对应a理解，结果：200,200 */
    margin: 10px;  /* 对应b理解，结果：200,200*/
    padding: 20px;  /* 对应c理解，结果：240,240*/
    overflow: scroll;  /* 对应d理解，结果：223,223，223=200（css大小）+40（两边内边距）-17（滚动条宽度）*/
}
window.onload = function(){