专栏首页杰的记事本两张图详解解元素位置宽度的属性(offsetHeight/ClientHeight/ScrollHeight/getBoundingClientRect)

两张图详解解元素位置宽度的属性(offsetHeight/ClientHeight/ScrollHeight/getBoundingClientRect)

  • offsetWidth/offsetHeight 返回值包含content + padding + border,效果与 e.getBoundingClientRect()相同
  • clientWidth/clientHeight 返回值只包含content + padding,如果有滚动条,也不包含滚动条
  • scrollWidth/scrollHeight 返回值包含content + padding + 溢出内容的尺寸

getBoundingClientRect (IE67的left、top会少2px,并且没有width、height属性)可以用来获取元素位置, 比如我经常用来获取滚动之后元素距离顶端的距离为0来判断 是否滚动到元素这个位置,然后把头部设置为fixed,比如div.getBoundingClientRect().top。 当然上面的属性也可以做到比如: 页面元素距离浏览器工作区顶端的距离 (div.getBoundingClientRect().top) = div.offsetTop – (document.documentElement.scrollTop || document.body.scrollTop)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3实现饼图扇形loading效果

    2. 当我们煎饼动画转起的一瞬间,我们让假的饼子隐藏回家打酱油去。于是,从上面看,我们看到的就是满满一层的鸡蛋。

    javascript.shop
  • CSS3变量var深入

    这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。

    javascript.shop
  • React性能优化三篇之二

    React仅仅专注于UI层;它使用虚拟DOM技术,以保证它UI的高速渲染;它使用单向数据流,因此它数据绑定更加简单;那么它内部是如何保持简单高效的UI渲染呢?

    javascript.shop
  • 一文读懂MySQL 8.0直方图

    0. 什么是直方图1. 直方图怎么工作2. 同时有索引和直方图会怎样3. 如何提高直方图的统计精确度

    [3306 Pai ] 社区
  • 大数据入门基础系列之浅谈Hive的数据存储和元数据存储

    Hive的数据存储 从表(Table)、外部表(External Table)、分区(Partition)和桶(Bucket)。 (1)Hive数据库 类似传统...

    企鹅号小编
  • 多图文帖智能封面提取方案

    ? 导语 一个帖子在用户点进去观看之前,能被用户捕捉到的信息只有封面缩略图、标题、作者等少量信息,这些因素直接决定了用户是否愿意点击该帖。一个好的封面能明显提...

    腾讯技术工程官方号
  • 基于逻辑回归的利用欠采样处理类别不平衡的

    这个信用卡欺诈数据集是从kaggle上下载的,网址(https://www.kaggle.com/mlg-ulb/creditcardfraud#creditc...

    py3study
  • .NET/ASP.NET Routing路由(深入解析路由系统架构原理)

    阅读目录: 1.开篇介绍 2.ASP.NET Routing 路由对象模型的位置 3.ASP.NET Routing 路由对象模型的入口 4.ASP.NET R...

    王清培
  • 基于Java语言构建区块链(四)—— 交易(UTXO)

    上一篇 文章,我们实现了区块数据的持久化,本篇开始交易环节的实现。交易这一环节是整个比特币系统当中最为关键的一环,并且区块链唯一的目的就是通过安全的、可信的方式...

    王维
  • vue @import 路径问题

    //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)

    kirin

扫码关注云+社区

领取腾讯云代金券