Js中那些高和宽的事儿

深藏阁楼爱情的钟 2022-06-09 03:24 138阅读 0赞

## 关于偏移量 ##

> offsetParent：定位父级  
> offsetHeight/offsetWidth  
> offsetLeft/offsetTop

![SouthEast][]

> offsetParent:与当前元素最近的经过定位(position不等于static)的父级元素

*  元素自身有fixed定位，offsetParent的结果为null  
    当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null。
 *  元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为body。
 *  元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素。
 *  body元素的parentNode是null。

> offsetHeight/offsetWidth：

均表示是自身的高度/宽度，如果有设置boder的话还应该加上boder的值。如果存在垂直滚动条，offsetWidth也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight也包括水平滚动条的高度。

> offsetTop/offsetLeft：

offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离；offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离。  
  
*所有偏移量都是只读的*  
*如果设置了display为none，则偏移量为0*

参考[深入理解定位父级offsetParent及偏移大小][offsetParent]

## Event对象的一些长度 ##

图片源自网络：  
![SouthEast 1][]

> clientX/clientY：

设置或获取鼠标指针位置相对于窗口客户区域的 x /y坐标，其中客户区域不包括窗口自身的控件和滚动条。

> offsetX/offsetY：

设置或获取鼠标指针位置相对于触发事件的（this）对象的 x/y坐标。

> screenX/screenY：

设置或获取获取鼠标指针位置相对于用户屏幕的 x/y坐标。

## 其他 ##

> clientHeight/clientWidth：

可见区域的高度/宽度，不包括boder的宽度,如果区域内带有滚动条，还应该减去横向/纵向滚动条不可用的高度/宽度，正常的是17px，其实就是滚动条的可滚动的部分了，其实clientHeight与height的高度差不多，如果不带滚动条的话他们的值都是一样的，如果带有滚动条的话就会比height值少17px；火狐与IE下均为一致。

> scrollHeight/scrollWidth：

scrollHeight和scrollWidth返回值分别是元素的实际高度和实际宽度，不包括滚动条所占用的空间。

> scrollLeft/scrollTop：该元素的显示（可见）的内容与该元素实际的内容的距离

即设置scrollleft就如同你拖动水平滚动条一样。假如你的页面太大，浏览器的宽度不够，就会出现滚动条。一开始scrollLeft的值为0，你就看到了你的页面最左边的内容。而不显示超过浏览器的那部分，当你向右拖动滚动条时，scrollLeft的值在增大，你就看到了右边因隐藏的东西，而看不到左边隐藏的部分。他就会从scrollLeft的位置开始显示，而不显示0-scrollLeft的元素内容。即：该元素的显示位置与实际内容的位置的距离变大。简单了说：元素会从scrollLeft的位置显示该元素的内容。  
假如不懂的话，你就把元素的所有内容都在纸画出拉，元素的最左边为0,显示的宽度为10,那就就能看到0-10的位置，假如scrollLeft为20的话，你就能看到从20的位置开始显示，向后显示10个  
那么scrollTop和scrollLeft一样，只不过变成了垂直了而已。  
实现内容的滚动效果（其中内容可以是任何东西：图片，文字，等等）  
  
图片源自网络：  
![这里写图片描述][SouthEast 2]

[SouthEast]: /images/20220609/66650dac4b50489b999e4966384cb281.png
[offsetParent]: http://www.cnblogs.com/xiaohuochai/p/5828369.html
[SouthEast 1]: /images/20220609/22f3230aeb4b4181bcea21e81e0c0262.png
[SouthEast 2]: /images/20220609/2acce9794e4240049c25f2075eb6ec4e.png