JS中关于位置和尺寸的api

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,统一被指定为视口的宽度。

 

上一篇:滑动的导航条


下一篇:JS之DOM篇-offset偏移量