JavaScript的offset系列,client系列,page系列,scroll系列

JavaScript的offset系列,client系列,page系列,scroll系列

一、offset系列

offsetX,offsetY
是该事件发生的盒子模型里的坐标,以盒子模型的左上角为原点,与滚动条无关。

offsetLeft, offsetTop
此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。
返回值是一个整数,单位是像素。

offsetWidth, offsetHight
此属性可以获取元素的宽度和高度,宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。

offsetParent
此属性可以返回距离当前元素最近的采用定位(position属性值为fixed、relative或者absolute)祖先元素。
如果祖先元素中没有采用定位的元素,则返回body对象。

二、client系列

clientX,clientY
是整个浏览器可用部分里的坐标,以浏览器可视区域的左上角为原点,与滚动条无关。

clientWidth, clientHeight
此属性可以返回一个元素的宽度值和高度值,值是:元素的内容+内边距;不包括边框、外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。

三、page系列

pageX,pageY:
是整个网页里的坐标,按照整个页面长度来计算,与滚动条有关。

四、scroll系列

scrollLeft
此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离,也就是元素被滚动条向左拉动的距离。
返回值是一个整数,单位是像素。
此属性是可读写的。

scrollTop
此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。
返回值是一个整数,单位是像素。
此属性是可读写的。

scrollWidth, scrollHeight
scrollHeight和scrollWidth返回值分别是元素的实际高度和实际宽度,不包括滚动条所占用的空间。获取内容的宽度或者自身宽度中的较大者; 当没有滚动条的时候,scrollWidth是内容+padding;有滚动条的时候,scrollWidth是内容+padding-滚动条的宽度
scrollHeight客户区高度值是height属性值和padding属性值之和,不包括水平滚动条、border和margin。
是一个只读属性,不能够对其赋值。scrollWidth类似,客户区宽度值是width属性值和padding属性值之和,不包括水平滚动条、border和margin。
是一个只读属性,不能够对其赋值。

猜你喜欢

转载自blog.csdn.net/TrumanGao/article/details/83019223
今日推荐