scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。

情况1:

元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。

scrollWidth=clientWidth,两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2:

元素的内容超过可视区,滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

clientWidth、offsetWidth和scrollWidth的区分的更多相关文章

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

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

  2. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

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

  3. 元素间距属性(scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin)

    scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...

  4. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

  5. scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动(冻结)的效果

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

  6. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...

  7. HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...

  8. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...

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

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

随机推荐

  1. 【jq】c#零基础学习之路(5)自己编写简单的Mylist<T>

    public class MyList<T> where T : IComparable { private T[] array; private int count; public My ...

  2. Tomcat Start 报错 (COULD NOT DELETE MAY BE LOCKED BY ANOTHER PROCESS)

    jsp文件重命名后发布不起来了,提示文件被占用,原因是当前的java ee项目 与它引用的java项目 依赖了相同的jar包,删除了clean 再发布,问题解决,如有需要再引用回来 http://it ...

  3. OC 相关

    1.OC runtime的理解[转载] http://www.csdn.net/article/2015-07-06/2825133-objective-c-runtime/1

  4. SpringMVC——文件上传

    ----------------------------------------------------------------------------spring.xml-------------- ...

  5. Java中事务的概念

    | 版权声明:本文为博主原创文章,未经博主允许不得转载. 前言: 在学习事务确实有不少弯路,那么今天笔者就用例子讲解一下事务,让初学者少走一些弯路. [回顾事务]问:什么是事务? 答:用专业术语来说事 ...

  6. unity, 只发射一个粒子的粒子系统

  7. sqlserver和Oracle内部的错误数据修复(DBCC、DBMS_REPAIR)

    数据库长时间运行后,因断电.操作系统.物理存储等的原因可能会造成数据库内部的逻辑或物理错误,我们可以使用一般的方式尝试修复. 对于sqlserver 我们可以使用DBCC命令: -- sqlserve ...

  8. ubuntu下sublime中文无法输入的问题

    感谢- http://www.cnblogs.com/ningvsban/p/4346766.html

  9. 打开页面自动打开QQ的javascript代码

    今天浏览个网站,发现我的QQ突然自动启动了,起初还以为中病毒了,后来找了半天无果,反而发现了几个无需启动的系统服务进程,遂管之. 后来打开网站的页面的源代码,发现一段javascript脚本,才知道我 ...

  10. MS SQL执行大脚本文件时,提示“内存不足”的解决办法()

    问题描述: 当客户服务器不允许直接备份时,往往通过导出数据库脚本的方式来部署-还原数据库, 但是当数据库导出脚本很大,用Microsoft SQL Server Management Studio执行 ...