• 盒子 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

     

  • 相关阅读:
    Java 泛型 泛型的约束与局限性
    Java 泛型 泛型方法
    Java 泛型 泛型数组
    Java 泛型 协变性、逆变性
    Java 泛型 协变式覆盖和泛型重载
    Java 泛型 泛型代码和虚拟机
    Insertion Sort List
    Remove Duplicates from Sorted List II
    String to Integer (atoi)
    SpringMvc源码入门
  • 原文地址:https://www.cnblogs.com/kitebear/p/4685798.html
Copyright © 2020-2023  润新知