JS的元素偏移量offset.元素可视区client.元素滚动scroll.的作用及其区别

傷城~ 2023-07-06 08:44 140阅读 0赞

## 1.元素偏移量offset; ##

我们可以使用offset系列相关属性可以动态的得到元素的位置(偏移).大小等…

*  **element.offsetParent**; 返回的是该元素的带有定位的父级元素,如果父级没有定位就返回body.
 *  **element.offsetTop**; 返回元素相对带有定位的父级元素上方的偏移
 *  **element.offsetLeft**; 返回元素相对带有定位的父级元素左方的偏移  
    ![在这里插入删掉描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70]我们常用的两种属性
 *  **element.offsetWidth**; 返回自身包括padding.边框.内容区域的宽度
 *  **element.offsetHeight**; 返回自身包括padding.边框.内容区域的高度  
    注意:这几个属性返回的数值都不带单位.

--------------------

## 元素可视区client系列 ##

使用client系列属性可以来获取元素可视区的相关信息.可以动态的获取元素的边框大小,元素大小.

*  **element.clientTop**; 返回的是元素上边框的大小
 *  **element.clientLeft**; 返回的是元素左边框的大小
 *  **element.clientWidth**; 返回自身包括padding,内容区的宽度,不含边框,返回的数值不带单位
 *  **element.clientHeight**; 返回自身包括padding,内容区的高度,不含边框,返回的数值不带单位.

--------------------

## 元素滚动scroll. ##

我们使用scroll系列的相关属性可以动态的得到该元素的大小,滚动距离.

*  **element.scrollTop**; 返回被卷去的上侧距离  
    我们经常用这个属性
 *  **element.scrollLeft**; 返回被卷去的左侧距离
 *  **element.scrollWidth**; 返回自身实际的宽度,不含边框
 *  **element.scrollHeight**; 返回自身实际的高度,不含边框
 *  注意:返回的数值都不带单位  
    **如果是页面被卷去头部可以通过window.pageYOffset获得;  
    如果是页面被卷去左侧可以通过window.pageXOffset获得;**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020021714482072.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA==,size_16,color_FFFFFF,t_70