在js中定位父级及偏移量offset的理解分析

绝地灬酷狼 2022-01-28 08:41 171阅读 0赞

1.  偏移量  
    1）偏移量(offset dimension)：涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性  
    2）偏移参照：定位父级offsetParent  
    3） 图示理解：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]
2.  offsetParent  
    1） 定位父级：与当前元素最近的经过定位(position不等于static)的父级元素  
    2）元素自身有fixed定位，offsetParent的结果为null  
    当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null  
    注意：firefox浏览器有兼容性问题  
    3）元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为  
    4）元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素  
    5）元素的parentNode是null  
    6）对于定位父级offsetParent来说，IE7-浏览器存在以下bug  
    bug1：当元素本身经过绝对定位或相对定位，且父级元素无经过定位的元素时，IE7-浏览器下，offsetParent是  
    bug2：如果父级元素存在触发haslayout的元素或经过定位的元素，且offsetParent的结果为离自身元素最近的经过定位或触发haslayout的父级元素
3.  offsetWidth  
    1）offsetWidth表示元素在水平方向上占用的空间大小，无单位(以像素px计)  
    2）offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width;
4.  offsetHeight  
    1）offsetHeight表示元素在垂直方向上占用的空间大小，无单位(以像素px计)  
    2）offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width  
    3）如果存在垂直滚动条，offsetWidth也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight也包括水平滚动条的高度  
    4）举例：IE8-浏览器将垂直滚动条的宽度计算在width宽度和height高度中，width和height的值仍然是100px；而其他浏览器则把垂直滚动条的宽度从width宽度中移出，把水平滚动条的高度从height高度中移出，则滚动条宽度为17px，width宽度和height高度为剩下的83px
5.  offsetTop  
    1）offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离  
    2）IE7-浏览器在offsetTop属性的处理上存在bug  
    bug1：若父级设置position: relative，则在IE7-浏览器下，offsetTop值为offsetParent元素的paddingBottom值  
    bug2：若父级设置position: aboslute(或其他触发haslayout的条件)，offsetTop值为offsetParent元素的paddingBottom值和当前元素的marginTop值的较大值
6.  offsetLeft  
    1）offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
7.  页面偏移  
    1）某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，并加上offsetParent的相应方向的边框，如此循环直到根元素，就可以得到元素到页面的偏移量  
    2）默认情况下，IE8-浏览器下如果使用currentStyle()方法获取和(甚至普通div元素)的边框宽度都是medium，而如果使用clientLeft(或clientTop)获取边框宽度，则是实际的数值  
    3）所有偏移量属性都是只读的  
    4）如果给元素设置了display:none，则它的偏移量属性都为0  
    5）每次访问偏移量属性都需要重新计算  
    6）注意：  
    重复访问偏移量属性需要耗费大量的性能，所以要尽量避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: /images/20220128/aa765d0a2a0f4d83adab8fed98cb5956.png