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. Android学习

    http://www.jikexueyuan.com/path/android 一.概述: 03年10月建立android科技,05年8月被google收购,07年11月成立开放手持设备联盟(Open ...

  2. 十分钟搞定微信企业帐号“echostr校验失败,请您检查是否正确解密并输出明文echostr”

    问题域:在这里我们只解决密文可以正确解密,但微信验证提示“echostr校验失败,请您检查是否正确解密并输出明文echostr”的问题. 干货:没有正确验证的原因是:你给微信返回的是字符串,而微信需要 ...

  3. ABBYY FineReader 12对系统有哪些要求

    ABBYY FineReader是市场领先的ocr文字识别软件,可快速方便地将扫描的文档.PDF文档和图像文件(包括数码照片)转化为可编辑.可搜索的格式.每个软件都有其安装运行的系统要求,ABBYY ...

  4. 别再为了this发愁了------JS中的this机制

    别再为了this发愁了------JS中的this机制 题记:JavaScript中有很多令人困惑的地方,或者叫做机制.但是,就是这些东西让JavaScript显得那么美好而与众不同.比方说函数也是对 ...

  5. Spring以及SPringmvc相关问题: ServletContext -父子容器

    总结如下: 明确了Servlet规范中ServletContext的作用和意义.此外明确一个Tomcat中多个web应用,每个人web应用有唯一的一个ServletContext(全局上下文).[例子 ...

  6. 支付宝支付参数MD5签名

    protected String signMD5(List<String> paramNames, String key, String charset) throws Unsupport ...

  7. cWeb开发框架,基于asp.net的cWeb应用开发平台介绍(一)

    cWeb开发框架是基于asp.net的B/S应用开发平台,采用三层架构理论,应用简单.代码简洁.运行快速. cWeb是bubufx提供,是分享资源,无任何版权限制,bubufx继续传承互联网精神,可随 ...

  8. Nginx上传文件失败

    公司用Nginx做反向代理,出现了上传文件失败的问题,通过查看错误日志,发现是上传文件太大的缘故. 通过查找资料,才知道nginx默认最大上传文件时1M.这就需要修改配置文件,将上传文件大小进行修改. ...

  9. 短链(ShortURL)的Java实现

    什么叫短链或短址? 就是把长的 URL 转成短的 URL, 现在提供这种服务的有很多公司,我们以google家的 URL shortener 服务: http://goo.gl/ 为例. 任何长网址都 ...

  10. Keepalive双主搭建配置

    Keepalive 双主搭建配置 keepalived保证双主数据库的可用性 环境说明 192.168.1.10  keepalive 主1 192.168.1.20  keepalive 主2 19 ...