zoukankan      html  css  js  c++  java
  • getBoundingClientRect方法获取元素在页面中的相对位置

    获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成“回溯”。而 getBoundingClientRect 方法则
    兼容性较好,基本所有的浏览器都支持了,且使用起来更容易和简单。

    1.使用语法:

    element.getBoundingClientRect();

    方法中没有任何参数,返回值为对象类型。

    2.在IE8及以下的浏览器中,返回值对象包含的属性值有:

    top::元素上边缘距离文档顶部的距离;

    right: 元素右边缘距离文档左边的距离;

    bottom:元素下边缘距离文档顶部的距离;

    left:元素左边缘距离文档左边的距离;

    3.在IE9以上、谷歌、火狐等浏览器中,返回值对象包含的属性值有:

    top: 元素上边缘距离文档顶部的距离;

    right:元素右边缘距离文档左边的距离;

    bottom:元素下边缘距离文档顶部的距离;

    left:元素左边缘距离文档左边的距离;

    width:元素的宽度(包含 padding 和 border)

    height:元素的高度(包含 padding 和 border)

    4.在IE8及以下浏览器没有 width 和 height 属性的解决方法:

    在IE8及以下浏览器中,可以通过计算得到元素的宽和高:

    如:

    var dom = document.querySelector("#demo"),
    r = dom.getBoundingClientRect();
    
    var width = r.right - r.left;
    var height = r.bottom - r.top;
  • 相关阅读:
    Linux下gdb attach的使用(调试已在运行的进程)
    Linux ps 命令
    SemaphoreFullException when checking user role via ASP.NET membership
    c程序内存分布
    正则表达式
    事务实战感悟
    oracle免客户端安装 plsql连接
    关于tomcat的热部署
    json工具包比较 fastjson jackson gson
    图片 滚动 放大缩小 旋转
  • 原文地址:https://www.cnblogs.com/jofun/p/8945409.html
Copyright © 2011-2022 走看看