偏移量
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高)