javascript基础：DOM5元素尺寸和位置

一、获取元素尺寸

1、clientWidth和clientHeight

var box = document.getElementById('box');
var width = box.clientWidth;//显示的宽度
var height = box.clientHeight;//显示的高度

对于元素的实际大小, clientWidth
和 clientHeight 理解方式如下:

1.增加边框,无变化,为 200;

2.增加外边距,无变化,为 200;

3.增加滚动条,最终值等于原本大小减去滚动条的大小,为 184;

4.增加内边距,最终值等于原本大小加上内边距的大小,为 220;

5.如果说没有设置任何 CSS
的宽和高度,
那么非 IE 浏览器会算上滚动条和内边距的计算后的大小,
而 IE 浏览器则返回 0。

2、scrollWidth和scrollHeight

var scrollWidth = box.scrollWidth;//滚动内容的宽度
var scrollHeight = box.scrollHeight;//滚动内容的高度

PS:对于元素的实际大小, scrollWidth和 scrollHeight理解如下:

1.增加边框,不同浏览器有不同解释:

a) Firefox 和 Opera浏览器会增加边框的大小, 220 x 220

b) IE、Chrome
和 Safari 浏览器会忽略边框大小, 200 x 200

c) IE 浏览器只显示它本来内容的高度, 200 x 18

2.增加内边距,最终值会等于原本大小加上内边距大小 ,220 x 220,IE为 220 x 38

3.增加滚动条,最终值会等于原本大小减去滚动条大小 ,184 x 184,IE为 184 x 18

4.增加外边据,无变化。

5.增加内容溢出,Firefox、Chrome和 IE
获取实际内容高度,Opera
比前三个浏览
器获取的高度偏小,Safari比前三个浏览器获取的高度偏大。
提示：如果显示的内容有溢出最好是设置上overflow：scroll；并设置字体的大小font-size:16px;

3、offsetWidth和offsetHeight

var offWidth = box.offsetWidth;//包含边框、内边距和滚动条的宽度
var offHeight = box.offsetHeight;//包含边框、内边距和滚动条的高度

PS:这组属性可以返回元素实际大小,对于元素的实际大小, offsetWidth和
offsetHeight 理解如下:

1.增加边框,最终值会等于原本大小加上边框大小,为 220;

2.增加内边距,最终值会等于原本大小加上内边距大小,为 220;

3.增加外边据,无变化;

4.增加滚动条,无变化,不会减小;

PS:

    以上三种方式都返回了元素大小,默认单位是 px,

    如果你强行设置了单位,比如 100em之类,它还是会返回
px的大小。

    对于元素大小的获取,一般是块级 (block)元素并且以设置了 CSS大小的元素较为
方便。

    如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦 ,所以,建议使用的时候注意。

二、获取元素的周边尺寸和位置

box.clientLeft; //获取左边框的长度
box.clientTop; //获取上边框的长度
box.offsetLeft; //相对父元素顶部的偏移量50
box.offsetTop; //相对父元素左侧的偏移量50
//PS:获取元素当前相对于父元素的位置,最好将它设置为定位 position:absolute;
//否则 不同的浏览器会有不同的解释。
box.offsetParent; //得到父元素
box.scrollTop; //获取滚动内容上方的位置
box.scrollLeft; //获取滚动内容左方的位置

三、getBoundingClientRect() 

这个方法返回一个矩形对象 ,包含四个属性 :left、top、right和
bottom。分别表示元素各边与页面上边和左边的距离。 

var box =document.getElementById('box');//获取元素
alert(box.getBoundingClientRect().top);//元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right);//元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom);//元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left);//元素左边距离页面左边的距离

IE、Firefox3+、Opera9.5、Chrome、Safari
支持,在
IE
中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。 

document.documentElement.clientTop; //非 IE 为 0,IE 为 2
document.documentElement.clientLeft ; //非 IE 为 0,IE 为 2

自己定义一个兼容的方法

function getRect(element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left = document.documentElement.clientLeft;
return {
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
PS:分别加上外边据、内边距、边框和滚动条,用于测试所有浏览器是否一致。