JS中关于位置和尺寸的api-优快云博客

本文深入探讨了HTML元素的布局和定位机制，包括offsetParent、offsetLeft和offsetTop的使用，以及如何通过不同方法获取元素在页面中的位置和尺寸。同时，介绍了浏览器差异对定位的影响，并提供了获取元素绝对位置、相对位置和尺寸的多种方法。

HTMLElement.offsetParent

　　由于offsetTop 和 offsetLeft 都是相对于 offsetParent 内边距边界的，故offsetParent的意义十分重大。offsetParent的机制与css中包含块的概念十分类似但并不完全一致，其不一致有时候是由于浏览器的不同而导致的，例如：当元素为固定定位时(fixed)，chrome浏览器的 offsetParent 值为 Null，而火狐的则为 body 元素。总结规律如下：

规则(当html和body之间的margin被清除时)：
本身定位为fixed 本身定位非fiexd
offsetParent 火狐非火狐父级无定位父级有定位
body null body 有定位的父级
尽管本身定位为fixed时，非火狐浏览器为null，body.offsetTop 和 body.offsetLeft的值仍然为0（即默认值为0）。因此，当html和body之间的margin值被清除时，就可以视为 offsetLeft 和 offsetTop 也是参照于 body 的。

HTMLElement.offsetLeft

　　 offsetLeft 是一个只读属性，返回当前元素左上角相对于 offsetParent 节点的左边界偏移的像素值。

HTMLElement.offsetTop

　　offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。

获取元素在页面中的位置

1.获取绝对位置 --- 原生实现

while循环叠加offsetParent的offsetTop和offsetLeft计算出元素的绝对位置，元素的 boder 和 margin 会影响这个函数的取值。不推荐使用

function getPointAb(node){
    //while循环叠加offsetParent的offsetTop和offsetLeft
    var x =0;
    var y = 0;
    while(node){
        x+=node.offsetLeft;
        y+=node.offsetTop;                    
        node = node.offsetParent;
    }
                
    return {x:x,y:y};
}

2.获取滚动条滚动的距离

L = document.documentElement.scrollLeft||document.body.scrollLeft;
T = document.documentElement.scrollTop||document.body.scrollTop;

3.获取相对位置 --- 原生实现

在while循环叠加取得绝对位置的基础上，减去滚动条滚动的距离。没有办法兼容border和margin

//boder margin会影响这个函数的取值
    function getPointRe(node){
    //while循环叠加offsetParent的offsetTop和offsetLeft
        var x =0;
        var y = 0;
        while(node){
            x+=node.offsetLeft;
            y+=node.offsetTop;
                    
            node = node.offsetParent;
    }
                
    var L = document.documentElement.scrollLeft||document.body.scrollLeft;
    var T = document.documentElement.scrollTop||document.body.scrollTop;
    return {x:x-L,y:y-T};            
}

4.Element.getBoundingClientRect() --- 兼容性好

返回值：对象
- width：border-box的宽
- height：border-box的高
- top：元素border-box的左上角的相对位置纵坐标
- left：元素border-box的左上角的相对位置横坐标
- bottom：元素border-box的右下角的相对位置的纵坐标
- right：元素border-box的右下角的相对位置的横坐标

获取元素尺寸

1.offsetWidth & offsetHeight

该属性是一个只读属性，返回一个元素的尺寸（宽度or高度）
其返回值为元素可视区域(padding box)的大小加上边框的大小，即 padding box(可视区域) + border
此属性会返回一个四舍五入的小数，若想得到更精确的值，可以使用 getBoundingClientRect() 方法
返回值 = 边框(border) + 内边距(padding) + 相应方向滚动条(scrollbar) + CSS设置的宽度(width)或高度(height)的值。

2.clientWidth & clientHeight

该属性表示元素的内部宽度，单位值为像素
此属性会返回一个四舍五入的小数
其返回值为元素可视区域(padding box)的大小
注意：当用此属性获取根标签的大小时，无论根标签有没有margin，都会无视margin返回屏幕视口的尺寸（即 document.documentElement.clentWidth 返回该设备屏幕分辨率）

tips：在ie10及ie10以下，根标签的clientWidth和offsetWidth，统一被指定为视口的宽度。

转载于:https://www.cnblogs.com/zhanghua-zh/p/10327462.html