新手看到这几个属性，很头疼，参考了网上一些文章，加上自己实践，给出对这几个属性的解释

我把代码贴上来，方便大家验证

在chrome浏览器中，不知为什么图片容器高度比图片高度多了4px，把图片设置为block或者是容器的fontSize设置为0可解决这个问题。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .div1 {

      position: absolute;

      top: 180px;

      left: 180px;

      width: 500px;

      height: 500px;

      background: #E91616;

      overflow: auto;

      z-index: 10;

      border: 20px solid green

    }

    .img1 {

      position: absolute;

      top: 200px;

      left: 200px;

      opacity: 0.5;

    }

  </style>

</head>

<body>

  <div class="div1">

    <!-- 容器比图片多4px -->

    <!-- 设置img为块级元素 -->

    <!-- 或者是设置容器元素的fontSize为0 -->

    <img style="display: block" src="../common/baiduPicture/8.jpg" alt="">

  </div>

  <img class="img1" src="../common/baiduPicture/8.jpg" alt="">

</body>

</html>

图片是这个

页面效果，我放了两张图片，下面半透明的那张是完整显示，方便和框中的不完整的做对比。

水平方向上

1是clientWidth，2是offsetWidth，3是scrollWidth

不能我说是就是，要想办法验证一下

验证clientWidth

从图上看，clientWidth + 滚动条的宽度 应该恰好等于div1的contentBox的宽度

而滚动条宽度可以用（注意要先清除body的margin）

window.innerWidth - document.body.clientWidth

来获取，我的结果是，滚动条宽度为17px

获取div1的clientWidth，483

获取divcontentBox的width，500（我在chrome下审查元素，显示的是483px，有偏差，在firefox下就显示的是500）

正好相等

验证offsetWidth

从图上看，offsetWith应该等于 clientWidth + 滚动条宽度 + 两边border宽度

获取offsetWith，540

样式中border是20

540 = 483 + 17 + 40，相等

验证scrollWidth

从图上看，scrollWidth应该等于图片宽度

获取scrollWidth，709

图片宽度也是709

两者相等

大家可以自己验证一下

垂直方向上

4是clientHeight，5是offsetHeight，6是scrollHeight

验证方法和上面一样。

scrollTop

我们在向下滚动 滚动条的时候，可以看成是里面内容在向上移动，而scrollTop就是图片向上移动的距离。

按照这个说法，当滚动条在从最上面滚动到最下面的时候（如下图所示），图片的底线就是半透明图片的底线的位置，移动到，div1水平滚动条顶线的位置

所以，应该有

图片向上偏移的距离（scrollTop） = 图片的高度 - div1的clientHeight

图片的高度是987

div1的clientHeight是483

div1的scrollTop是504

等式成立

完

如果错误，欢迎讨论！

图解clientWidth，offsetWidth，scrollWidth，scrollTop的更多相关文章

  1. js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。（转）

    js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...

  2. clientWidth,offsetWidth,scrollWidth区别

    <html> <head> <title>clientWidth,offsetWidth,scrollWidth区别</title> </head ...

  3. JS中关于clientWidth offsetWidth scrollWidth 的区别及意义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  4. JS中关于clientWidth offsetWidth scrollWidth 等的含义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  5. js中的clientWidth offsetWidth scrollWidth等的含义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  6. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

    JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...

  7. clientWidth offsetWidth scrollWidth

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  8. JS中关于clientWidth offsetWidth scrollWidth 等的区别

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  9. JS中关于clientWidth offsetWidth scrollWidth 等的含义的详细介绍

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  10. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

随机推荐

  1. Servlet之文件的上传与下载

    文件上传和文件下载是我们学JAVA Web时必不可少的模块.今天我们探讨下这个问题 文件上传: request.setCharacterEncoding("utf-8");//设置 ...

  2. MongoDB副本集模式安装

    设备: 三个1G.20G.1核的虚拟机,系统是SentOS7 min 设置目录: Server1: mkdir -p /home/mongoshard/data/shard11 /home/mongo ...

  3. java内存区域分析及java对象的创建

    java虚拟机在执行java程序的过程中会将它管理的内存区域加分为若干个的不同的数据区域. 主要包括以下几个运行时数据区域,这里就只介绍经常会用到的 1:java虚拟机栈:我们常说的堆栈,栈就是指的j ...

  4. Wampserver查看php配置信息

    Wampserver安装完成之后输入localhost会有欢迎Wampserver界面. [查看php配置信息]:在页面点击"phpinfo()"进入php配置信息页面. [使用p ...

  5. zookeeper简单介绍

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt193 ZooKeeper是Hadoop的正式子项目,它是一个针对大型分布式系 ...

  6. CDN架构以及原理分析

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp61  在不同地域的用户访问网站的响应速度存在差异,为了提高用户访问的响应 ...

  7. grunt之connect、watch

    先说下这两个插件配合的用处,简单的说,它们可以拯救你的F5.connect用于建立一个静态服务器,watch监听文件的修改并自动实时刷新浏览器的页面. 还是options走起. connect(V0. ...

  8. 团队作业4——第一次项目冲刺（Alpha版本）4.22

    团队作业4--第一次项目冲刺(Alpha版本) Day one: 会议照片 由于团队中的组员今天不在学校,所以我们的站立会议提前一天展开. 项目进展 由于今天是Alpha版本项目冲刺的第一天,所以没有 ...

  9. 201521123002《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 1.提交函数实 ...

  10. 201521123003《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源 ...