scrollHeight:获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置event.clientX相对文档的水平座标event.clientY相对文档的垂直座标event.offsetX相对容器的水平坐标event.offsetY相对容器的垂直坐标
document.body.scrollLeft设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。document.body.scrollTop设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离document.documentElement.scrollTop垂直方向滚动的值event.clientX+document.documentElement.scrollTop相对文档的水平座标+垂直方向滚动的量
window.screen.availWidth返回当前屏幕宽度(空白空间)window.screen.availHeight返回当前屏幕高度(空白空间)window.screen.width返回当前屏幕宽度(分辨率值)window.screen.height返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight;返回当前网页高度window.document.body.offsetWidth;返回当前网页宽度window.document.body.clientHeight;返回当前网页可见区域高度window.document.body.clientWidth;返回当前网页可见区域宽度
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:clientWidth=width+paddingclientHeight=height+paddingoffsetWidth=width+padding+borderoffsetHeight=height+padding+border
IE5.0/5.5:clientWidth=width-borderclientHeight=height-borderoffsetWidth=widthoffsetHeight=height(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
onMouseover当鼠标经过的时候,触发=后面的脚本函数onMouseout当鼠标离开。。onMouseUP当鼠标按下又抬起。。。onmousemove当鼠标移动。。onmousedown当鼠标按下时。。
假设obj为某个HTML控件。obj.offsetTop指obj相对于版面或由offsetParent属性指定的父坐标的计算上侧位置,整型,单位像素。obj.offsetLeft指obj相对于版面或由offsetParent属性指定的父坐标的计算左侧位置,整型,单位像素。obj.offsetWidth指obj控件自身的绝对宽度,不包括因overflow而未显示的部分,也就是其实际占据的宽度,整型,单位像素。obj.offsetHeight指obj控件自身的绝对高度,不包括因overflow而未显示的部分,也就是其实际占据的高度,整型,单位像素。
我们对前面提到的offsetParent作个说明。offsetParent获取定义对象offsetTop和offsetLeft属性的容器对象的引用。offsetTop与offsetParent很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。
以上属性在FireFox中也有效。另外:我们这里所说的是指HTML控件的属性值,并不是document.body,document.body的值在不同浏览器中有不同解释(实际上大多数环境是由于对document.body解释不同造成的,并不是由于对offset解释不同造成的)
我们知道offsetTop可以获得HTML元素距离上方或外层元素的位置,style.top也是可以的,二者的区别是:一、offsetTop返回的是数字,而style.top返回的是字符串,除了数字外还带有单位:px。二、offsetTop只读,而style.top可读写。三、如果没有给HTML元素指定过top样式,则style.top返回的是空字符串。offsetLeft与style.left、offsetWidth与style.width、offsetHeight与style.height也是同样道理。
clientHeight大家对clientHeight都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
offsetHeightIE、Opera认为offsetHeight=clientHeight+滚动条+边框。NS、FF认为offsetHeight是网页内容实际高度,可以小于clientHeight。
scrollHeightIE、Opera认为scrollHeight是网页内容实际高度,可以小于clientHeight。NS、FF认为scrollHeight是网页内容高度,不过最小值是clientHeight。
简单地说clientHeight就是透过浏览器看内容的这个区域高度。NS、FF认为offsetHeight和scrollHeight都是网页内容高度,只不过当网页内容高度小于等于clientHeight时,scrollHeight的值是clientHeight,而offsetHeight可以小于clientHeight。IE、Opera认为offsetHeight是可视区域clientHeight滚动条加边框。scrollHeight则是网页内容实际高度。
同理clientWidth、offsetWidth和scrollWidth的解释与上面相同,只是把高度换成宽度即可。
说明以上基于DTDHTML4.01Transitional,如果是DTDXHTML1.0Transitional则意义又会不同,在XHTML中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的DOCTYPE来启用不同的解释器
scrollTop是“卷”起来的高度值,示例: