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

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

在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. 项目管理svn

    https://nchc.dl.sourceforge.net/project/tortoisesvn/1.9.6/Application/TortoiseSVN-1.9.6.27867-x64-sv ...

  2. 散列表(拉链法与线性探测法)Java实现

    package practice; import java.security.Principal; import java.util.Scanner; import edu.princeton.cs. ...

  3. SQL菜鸟学习札记（一）

    刚开始学SQL,从最基础的语句开始写,用一个LOL数据库做实验.目前使用的工具是MySQL Workbench,感觉比较顺手,界面没花多久时间就读懂的差不多了,所以目前就使用这个工具来做SQL的学习了 ...

  4. 第3阶段——内核启动分析之prepare_namespace()如何挂载根文件系统和mtd分区介绍(6)

    内核启动并初始化后,最终目的是像Windows一样能启动应用程序,在windows中每个应用程序都存在C盘.D盘等,而linux中每个应用程序是存放在根文件系统里面,那么挂载根文件系统在哪里,怎么实现 ...

  5. vim插件ctags的安装与使用

    LINUX系统下看程序或者编程序时,看到一个函数经常需要知道该函数的定义,这时ctags就派上用场了,其安装和使用方法如下: 安装方法: sudo apt-get install ctags (ubu ...

  6. Day-11： IO编程

    由于CUP的运行速度远高于其他外设,IO操作有两种方式: 同步IO:CUP登着,程序暂停直到执行完后续代码 异步IO:CUP不等待,去做其他的事情,磁盘做完该做的事情后,告诉CUP,CUP再进行后续代 ...

  7. centos6 内核优化

     以下为部分优化参数,具体优化方法还要看情况而定 [root@localhost ~]# vi /etc/sysctl.conf    #末尾添加如下参数 net.ipv4.tcp_syncookie ...

  8. 201521123084 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. (1)Java中把不同类型的输入.输出抽象为流(Stream),而其中输入.输出的数据则称为数据流(Data ...

  9. 团队作业4——第一次项目冲刺（Alpha版本）5th day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 计时模式已经大致完成了 接下来是记录成绩的部分 四.困难与问题 1.新语言的学习与适应较慢,整体的开发进展达不到预期效果, 2 ...

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

    1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 学会了设计一个类时,尽量用private修饰属性,public修饰方法:类名的首字母要大写. ...