zoukankan      html  css  js  c++  java
  • 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释

     offsetLeft

    获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将margin-left加入计算

     offsetTop

    获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最顶端端这时候不管滚动条移到哪) 当前元素向上的位置 记住它会将margin-top加入计算

     offsetWidth

    获取盒子的 宽度+边框+padding+margin的宽度

    offsetHeight 同上

     getBoundingClientRect 原生方法

    它的width和height 获取情况和offsetWidth,offsetHeight相同。

    top 获取的是当元素距离窗口的可视顶点的距离如果超过就为负

    left获取的是当元素距离窗口的可视最左侧的距离如果超过就为负

    clientWidth 指的是 当前元素的高度+padding的上下边距

    clientHeight 指的是 当前元素的宽度+padding的左右边距

     Jquery 的 offset()

    left 获取当前元素距离距离document最左侧的距离 包括margin

    top 获取当前元素距离距离document最顶点的距离是页面最顶端,到盒子边框>内边距>元素的距离这个距离包括 margin 但是不同于 getBoundingClientRect 的 top

    $ele.width 获取当前元素的宽度 不包括 内边距外边框margin

    $ele.height 获取当前元素的高度 不包括 内边距外边框margin

     下面是兼容情况,有些版本的浏览器可能不兼容width/height

     

  • 相关阅读:
    numpy用法介绍-未完待续
    GeoJSON相关操作
    awk日志分析
    awk获取外部变量
    Shell编程二
    Shell编程
    Linux监控平台搭建
    Linux集群架构
    Linux集群
    MySQL主从(MySQL proxy Lua读写分离设置,一主多从同步配置,分库分表方案)
  • 原文地址:https://www.cnblogs.com/kitebear/p/4685798.html
Copyright © 2011-2022 走看看