一，获取元素CSS大小
1.通过style内联获取元素大小：
box.style.width
box.style.height
ps:有则获取，没有返回空
2.通过计算获取元素大小
var style = window.getComputedStyle ? window.getComputedStyle(box,null):null||box.currentStyle;
style.width
style.height
ps:可获取行内、内联和链接的样式，计算后的结果返回出来。有则返回元素的大小，没设置时非IE返回默认大小，IE返回auto。
3.通过CSSStyleSheet对象中的cssRules（或rules）属性获取元素大小
var sheet = document.styleSheets[0];
var rule = (sheet.cssRules||sheet.rules)[0];
rule.style.width
rule.style.height
ps:cssRules(或rules)只能获取内联和链接样式的宽高，不能获取行内和计算后的样式。
二.获取元素实际大小
1.clientWidth/clientHeight
元素可视区域内元素内容及内边距所占据的空间大小。
增加边框和外边距无变化，增加滚动条，在原值基础上减去滚动条大小，增加内边距，在原值基础上加上内边距大小。
ps：如果没有设置css宽高，非IE会算上滚动条和内边距计算后的大小，IE返回0.
2.scrollWidth/scrollHeight
获取滚动内容的元素大小，如果没有设置任何CSS的宽高，它会得到计算后的宽高。
1）增加边框时，不同浏览器的解释：
a）Firefox和Opera会增加边框的大小
b）IE、Chrome和Safari会忽略边框大小
c）IE只显示它本来内容的高度
2）增加内边距，最终值等于原本大小加上内边距大小，IE只显示它本来内容高度
3）增加滚动条，最终值等于原本大小减去滚动条大小，IE只显示它本来内容高度
4）增加外边距，无变化
5）增加内容溢出，Firefox、Chrome和IE获取实际内容高度，Opera比前三个获取的高度偏小，Safari获取的高度偏大。
2.offsetWidth/offsetHeight
返回元素实际大小，包含边框、内边距和滚动条。如果没有设置任何CSS的宽高，会得到计算后的宽高。元素实际大小在不同浏览器中的理解：
1）增加边框和内边距，最终值会等于原本大小加上其增加的边框和内边距大小。
2）增加外边距和滚动条，无变化。
ps：一般是获取block元素并且设置了CSS大小的元素较为方便。如果是内联或者没有设置大小的元素尤为麻烦。
三.获取元素周边大小
1.clientLeft/clientTop
获取元素设置了左边框和上边框的大小。
2.offsetLeft/offsetTop
获取当前元素相对父元素的位置，最好将它设置定位absolute，否则不同的浏览器会有不同的解释。
ps：加上边框和内边距不会影响它的位置，但加上外边距会累加。
box.offsetParent可以得到父元素
offsetParent中，如果本身父元素是<body>,非IE返回body对象，IE返回html对象。如果两个元素嵌套，如果上父元素没有使用定位position：absolute，那么offsetParent将返回body对象或html对象。
3.scrollTop和scrollLeft
获取滚动条被隐藏的区域大小，也可设置定位到该区域。
四.用DOM方法获取元素所需位置：个她BoundingClientRect（）
该方法返回一个矩形对象，包含四个属性：left、top、right和bottom，分别表示各边与页面上边和左边的距离。
ps：IE、Firefox3+、Opera9.5、Chrome、Safari支持。在IE中，以上所有方法都是默认坐标从（2,2）开始计算。
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
