美文网首页
getBoundingClinentRect

getBoundingClinentRect

作者: NowFuture | 来源:发表于2020-01-06 10:57 被阅读0次

getBoundingClinentRect 获取元素位置, 是DOM元素到浏览器可视范围的距离
返回一个 Object对象, 包含6个属性 ( top, left right, bottom, width, height)

  • right: 是指元素最右边距离左边的距离
  • bottom: 是指元素下边界距离最上面的 距离

兼容性

getBoundingClientRect() 最先是IE的私有属性,现在已经是W3C标准,不用担心兼容性问题
不过:
IE只返回top, left, right, bottom四个值
可以通过下面方式计算出

    var rect = object.getBoundingClientRect()
    var width = rect.right - rect.left
    var height = rect.bottom - rect.top
    // 兼容写法
    width = rect.width || (rect.right - rect.left)
    height = rect.height || (rect.bottom - rect.top)

相关文章

  • getBoundingClinentRect

    getBoundingClinentRect 获取元素位置, 是DOM元素到浏览器可视范围的距离返回一个 Obj...

网友评论

      本文标题:getBoundingClinentRect

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