美文网首页让前端飞
Element.getBoundingClientRect()

Element.getBoundingClientRect()

作者: EdmundChen | 来源:发表于2018-02-26 13:17 被阅读84次

    语法

    rectObject = ElementObject.getBoundingClientRect();
    

    返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。

    DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

    image.png

    空边框盒(译者注:没有内容的边框)会被忽略。如果所有的元素边框都是空边框,那么这个矩形给该元素返回的 width、height 值为0,left、top值为第一个css盒子(按内容顺序)的top-left值。

    当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果不希望属性值随视口变化,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的常量值。

    为了跨浏览器兼容,请使用 window.pageXOffsetwindow.pageYOffset 代替 window.scrollXwindow.scrollY。

    摘自MDN

    相关文章

      网友评论

        本文标题:Element.getBoundingClientRect()

        本文链接:https://www.haomeiwen.com/subject/znqyxftx.html