标签：
一、获取css的大小
1.第一种通过内联样式
var box = document.getElementById(‘box‘); var w = box.style.width; var h = box.style.height;
2.通过计算元素的大小（但是在ie情况下有一个问题，那就没写widht和height的css就返回auto）;
var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle; var w = style.width; var h = style.height;
3.通过CSSStyleSheet对象中的cssRules(或rules)属性获取元素大小（但是无法获得计算的样式）
var sheet = document.styleSheets[0]; var rule = (sheet.cssRules || sheet.rules)[0]; var w = rule.style.width; var h = rule.style.height;
以上三种方法都不行。
二、获取实际的大小
1.clientWidth和clientHeight
var w = box.clientWidth; var h = box.clientHeight;
说明：padding和scroll变动，才有变化
2.scrollWidth 和box.scrollHeight;
var w = box.scrollWidth; var h = box.scrollHeight;
说明，1）border变化，不同浏览器有不同变化2）padding变化，有变化3)margin变化，无变化
3.offsetWidth和offsetHeight
var w = box.scrollWidth; var h = box.scrollHeight;
说明，padding和border有变动，才有变化
三、获取元素周变的距离（原本只能从左边和上边）
1.clientLeft 和 clientTop
这组属性可以获取元素设置了左边框和上边框的大小。
var l = box.clientLeft; var t = box.clientTop;
2.获取相对父级元素的位置
var l = box.offsetLeft; var t = box.offsetTop; var parent = box.offsetParent; //获取伏击元素，返回body
说明，如果没有position：absolute;如果每个浏览器有不同解释
那么获取多层中的元素到body或html的距离，代码如下：
function offsetLeft(element){ var left = element.offsetLeft; var parent = element.offsetParent; while(parent!== null){ left += parent.offsetLeft; parent = parent.offsetParent; } return left; }
3.
//这组属性可以获取滚动条被隐藏的区域大小，也可设置定位到该区域。 box.scrollTop; //获取滚动内容上方的位置 box.scrollLeft; //获取滚动内容左方的位置
标签：
原文地址：http://www.cnblogs.com/liangcheng11/p/5754379.html
