offset & client & screen
(一)offset
offsetHeight & offsetWidth
指元素可视的高宽度,这个高宽度包括border,padding,滚动条和元素本身的高宽度
offsetLeft & offsetTop
返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。
offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。
offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。
当offsetParent为body时
在IE8/9/10和chrome中,offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。
在Firefox中,offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)。
offsetParent
-
如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。
-
如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。
offsetX & offsetY
返回相对于容器的坐标值
(二)client
clientHeight & clientWidth
可见内容的高宽,不包括border,包括padding
clientX & clientY
返回鼠标相对于文档的坐标值
(三)scroll
- scrollHeight: 获取对象的滚动高度。
- scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
- scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
- scrollWidth:获取对象的滚动宽度
(四)screen
参数 | 含义 |
screenX | 返回相当于屏幕窗口的X坐标(IE除外) |
screenY | 返回相当于屏幕窗口的Y坐标(IE除外) |
screenLeft | 返回屏幕窗口X坐标(适用于所有浏览器) |
screenTop | 返回屏幕窗口的Y坐标(适用于所有浏览器) |