龙喵专栏 /前端 /内容

js中getBoundingClientRect()的使用方法和兼容

版权声明:龙喵网
网站网址:http://ailongmiao.com/

getBoundingClientRect()是用来获取页面元素的位置的方法.这个方法最终返回的是一个矩形对象,包括四个属性:left top right bottom.

getBoundingClientRect()

  • top:元素上边到视窗上边的距离;
  • right:元素右边到视窗左边的距离;
  • bottom:元素下边到视窗上边的距离;
  • left:元素左边到视窗左边的距离; 

getBoundingClientRect()图解

  • width:边界矩形的宽度
  • height:边界矩形的高度 

注意:当我提到元素的边界矩形的时候,返回的大小包含了任何padding和border值。getBoundingClientRect()可以精确获取到保留小数点!

/*
{
    top: '元素顶部相对于视口顶部的距离',
    bottom: '元素底部相对于视口顶部的距离',
    left: '元素左边相对于视口左边的距离',
    right: '元素右边相对于视口左边的距离',
    height: '元素高度',
    width: '元素宽度'
}
*/
#content{
  height:400px;
  padding: 10px;
  border:5px solid red;
  margin:20px;
} 

返回的height将是:430px (400+10*2+5*2)

兼容性

ie9以下浏览器只支持 getBoundingClientRect 方法的 top 、bottom、right、left属性; 
ie9 和其它浏览器支持 getBoundingClientRect 方法 有6个属性 top 、bottom、right、left、width和height

// 兼容写法
function getClientReat(client) {
    const { top, bottom, left, right, height, width } = client.getBoundingClientRect()
    return {
        top,
        bottom,
        left,
        right,
        height: height || bottom - top,
        width:    width || right - left
    }
}
版权声明:龙喵网
网站网址:http://ailongmiao.com/

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/540.html

[ web前端导航 ]:http://ailongmiao.com/web/

相关阅读

    评论

    继续阅读

    无障碍 Web 开发

    无障碍 Web 开发

    Web前端 2019-06-04 5

    良好的 Web 可访问性,就是把你的网站建设成让尽可能多的人都觉得好用,可以让每一个人受益。语义化 HTML 也是确保 Web 良好访问性的

    禁止用户打开HTML页面调试

    Web前端 2019-05-18 5

    有时为了防止别人调试我们的HTML页面,盗取代码等行为,介绍一些能够阻止用户在浏览器中打开调试窗口的方法,这些方法只能一定程度的提

    细数CSS伪元素及其用法

    Web前端 2019-03-29 12

    CSS中有两个很常见的概念,伪类和伪元素。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元

      选择打赏方式

    打赏

    打赏