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

     

  • 相关阅读:
    基于SQL脚本将数据库表及字段提取为C#中的类
    libiconv字符集转换库在C#中的使用
    select选中事件
    PHP 字符串处理
    织梦自定义标签
    JQuery 实现 Tab 切换 index
    Juery 实现淡出 淡现效果
    SEO之H1,H2,H3,H4....STRONG使用方法
    Robots.txt 编写
    JS 获取时间
  • 原文地址:https://www.cnblogs.com/kitebear/p/4685798.html
Copyright © 2011-2022 走看看