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. 【Django】Django 定时任务实现(django-crontab+command)

    一.编写自定义django-admin命令 注:利用django-admin自定义命令我们可以ORM框架对model进行操作,如:定时更新数据库,检测数据库状态..... Django为项目中每一个应 ...

  2. php捕捉来自搜索引擎的用户IP地址时间和访问路径

    刚才看demo看到很有意思的地方记录一下 $zz_page=$_SERVER['REQUEST_URI']; $zz_name=$_SERVER['HTTP_USER_AGENT']; $zz_ip= ...

  3. 汇编语言基础 debug的使用

    -r 查看,改变CPU寄存器的内容 -r 加上寄存器名 在:后输入要写入的数据后 完成更改 debug 随着CS IP的改变 对应的汇编指令也不同 -r ip -r cs修改 ip cs 的值 d 段 ...

  4. 「LINUX资料」基础命令概览(一)

  5. jsonp案例

    <button id="btn">click</button><script type="text/javascript"> ...

  6. 开发adobe ane分享

    最近的项目使用adobe air开发,不可能避免的要使用到ane,项目初期的时候,使用了网上搜索到的了一些开源ane,最后发现,很多都不完善,要么版本太久,要么BUG很多,无人维护,所以下决心自己开发 ...

  7. Hibernate3 和Hibernate4 在配置文件上的区别

    在使用hibernate之前要首先对hibernate进行一些基础的配置信息,像映射文件XXX.hbm.xml  XXX代表当前的domain的模型类名 <?xml version=" ...

  8. dhtmlxScheduler日程安排控件

    dhtmlxScheduler是一个JavaScript日程安排控件 官方网站:http://www.dhtmlx.com/在线帮助文档:http://docs.dhtmlx.com/doku.php ...

  9. asmlib

    http://pandarabbit.blog.163.com/blog/static/209284144201292293642857/ centos6.5桌面2.6.32yum install k ...

  10. 解决ideviceinstaller未安装的问题

    在Mac上,使用Appium时提示: Could not initialize ideviceinstaller; make sure it is installed and works on you ...