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

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

在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. c89和c99中/运算符和%运算符为负数时的区别

    运算式 -8 / 5 = -1.6,在C89中取值为 -1 或 -2,C99的出现,CPU对除法的结果向零取整,上述运算式结果为 -1. 在C89和C99中都要确保 (a / b) * b + a % ...

  2. oracle查看锁和释放锁

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt108 Oracle数据库操作中,我们有时会用到锁表查询以及解锁和kill进程 ...

  3. Java之JMX 详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt194 一.JMX简介 JMX是一种JAVA的正式规范,它主要目的是让程序有被 ...

  4. WebServices 之 WSDL

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt234 一,WSDL概述 WebServices Description La ...

  5. JavaScript中你所不知道的Object（一）

    Object实在是JavaScript中很基础的东西了,在工作中,它只有那么贫瘠的几个用法,让人感觉不过尔尔,但是我们真的了解它吗? 1. 当我们习惯用 var a = { name: 'tarol' ...

  6. tkinter第一章1

    tk1 ------------------------------------------------------------------------------------------ impor ...

  7. 转：【Java集合源码剖析】Java集合框架

    转载轻注明出处:http://blog.csdn.net/ns_code/article/details/35564663   Java集合工具包位于Java.util包下,包含了很多常用的数据结构, ...

  8. make: Nothing to be done for 'all' 解决方法

    make: Nothing to be done for 'all' 解决方法 1.这句提示是说明你已经编译好了,而且没有对代码进行任何改动. 若想重新编译,可以先删除以前编译产生的目标文件:make ...

  9. Java8-初识Lambda

    廉颇老矣,尚能饭否 Java,这位已经20多岁的编程语言,称得上是编程语言界的老大哥了.他曾经攻城略地,碾压各路编程语言小弟,风光无限,不可一世.现在,也是家大业大,江湖地位,很难撼动. 但是,这依然 ...

  10. 结对编程四则运算gui

    码市地址:https://git.coding.net/linzhao/sizeyunsuangui.git 林 钊 -- 201421123105 吴世荣 -- 201421123119 王坤彬 - ...