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

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

在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. Json作为配置文件注意事项

    错误描述 在一次开发中,使用了JSON数据作为配置文件,但反序列化时总是出错,开始还以为是转义字符的问题,因为存了一个绝对路径(D:\xx\xx.json),后来测试发现竟然发现是类嵌套的问题. 解决 ...

  2. Laravel学习基础篇之--路由

    终于还是决定再多学一门重量级框架,当然首选必备还是被称为最优雅的Web开发框架--Laravel 对于框架的入门,首先了解它的路由规则是先前必备的,以下是laravel 中几种常见的基础路由规则 // ...

  3. 转载 远程用户连接mysql授权

    授权法:  在安装mysql的机器上运行:  1.d:\mysql\bin\>mysql -h localhost -u root  //这样应该可以进入MySQL服务器  2.mysql> ...

  4. 在Android上仿百度贴吧客户端Loading图标小球

    封面 前言 使用百度贴吧客户端的时候发发现加载的小动画挺有意思的,于是自己动手写写看.想学习自定义View以及自定义动画的小伙伴一定不要错过哦. 读者朋友需要有最基本的canvas绘图功底,比如画笔P ...

  5. 201521123054《Java程序设计》第8周学习总结

    1. 本周学习总结 2. 书面作业 List中指定元素的删除(题目4-1) 1.1 实验总结 每次删除时下标需要-1:原理如图 统计文字中的单词数量并按出现次数排序(题目5-3) 2.1 伪代码(简单 ...

  6. 201521123005 《Java程序设计》 第十一周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 Q1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  7. JAVA课程设计——“小羊吃蓝莓”小游戏

    JAVA课程设计--"小羊吃蓝莓"小游戏 1. 团队课程设计博客链接 http://www.cnblogs.com/HXY071/p/7061216.html 2. 个人负责模块或 ...

  8. 小Writeup

    Misc 100 下载文件之后是一个zip压缩包.因为一开始没有给任何提示信息,题目也什么都没说,爆破了一会无果.同时不是伪加密,所以应该是明文攻击.之后官方给出提示,是一个网址. F12进入调试,发 ...

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

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前 ...

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

    1. 本周学习总结 2. 书面作业 1.finally 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? finally块中的代码在正常情况下一定会执行,所 ...