JS距离的理解

偏移量
offsetWidth 元素在水平方向上占用的空间大，包括元素的宽度、可见的垂直滚动条宽度、左边框高度和右边框高度

offsetWidth=width+padding+border

offsetHeight 元素在垂直方向上占用的空间大小，包括元素的高度、可见的水平滚动条宽度、上边框高度和下边框高度

offsetHeight=height+padding+border

offsetLeft 元素相对于父级对象的左边距

offsetTop 元素相对于父级对象的上边距

客户区大小

clientWidth ：浏览器可见区域的宽度；clientWidth=width+padding

clientHeight：浏览器可见区域的高度；clientHeight=width+padding

滚动大小
scrollWidth：元素内容的总宽度(元素可以滚动的区域)；

scrollHeight：元素内容的总高度；

scrollLeft : 被隐藏在内容区域左侧的像素距离
scrollTop :被隐藏在内容区域顶部的像素距离

clientY:当鼠标事件发生时，鼠标相对于浏览器Y轴的位置

screenY:当鼠标时间发生时，鼠标相当于显示屏Y轴的位置

offsetX:当鼠标事件发生时，鼠标相对于事件源Y轴的位置

使用方法envent对象.offsetX

对象距离父级左侧和顶部的距离 offsetLeft，offsetTop （边距）

对象可视区域的宽度和高度 clientWidth，clientHeight clientWidth=width+padding

对象滚动宽度和高度 scrollWidth，scrollHeight （对象的实际内容的宽度，不包边线宽度）

对象左侧和顶部滚动的距离 scrollLeft，scrollTop

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度：window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

s = " 网页被卷去的高(ff)：" document.body.scrollTop;
s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop;
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

猜你喜欢