一,获取元素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)开始计算。