Js中那些高和宽的事儿
关于偏移量
offsetParent:定位父级
offsetHeight/offsetWidth
offsetLeft/offsetTop
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
Event对象的一些长度
图片源自网络:
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一样,只不过变成了垂直了而已。
实现内容的滚动效果(其中内容可以是任何东西:图片,文字,等等)
图片源自网络: