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. Kali Linux 2.0配置并安装常用的工具

    Kali Linux 前身是著名渗透测试系统BackTrack ,是一个基于 Debian 的 Linux 发行版,包含很多安全和取证方面的相关工具. Kali Linux 2.0是基于Debian ...

  2. 如何导出和导入mysql数据(数据迁移)

    . 导出数据库数据 mysqldump -uroot -p dp_db > dumpout.sql 其中 root是账户名 dp_db是需要导出的数据库名称 dumpout.sql存储导出的数据 ...

  3. mysql relay log参数汇总

    前言:MySQL进行主主复制或主从复制的时候会在配置文件制定的目录下面产生相应的relay log,本文档总结这些相关参数的定义及解释. 1.什么是relay log The relay log, l ...

  4. Hive 中parse_url的使用

    1.Hive的parse_url函数 parse_url(url, partToExtract[, key]) - extracts a part from a URL 解析URL字符串,partTo ...

  5. entity framework自动迁移

    第一步,建立测试项目,普通的WinForm类型,EntityMigration: 第二步,从NuGet为项目添加MySql.Data.Entity,由Oracle提供,我选择人气高的: 第三步,建立实 ...

  6. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

  7. CentOS中的常用命令

    1. 网络 1.1 查看所有端口 netstat -ntlp 1.2 查看被打开的端口 netstat -anp 1.3 查看端口占用情况 lsof -i: 或 lsof -i tcp: 2. 硬盘 ...

  8. hibernate:Named query not known: findXXXX or XXXX is not mapped

    .hbm.xml文件所放的位置怎么看怎么都在spring配置的扫描路径中,就是会出现标题所示错误,查看log日志,的确也没发现XXXX被mapped的记录~ 参考解决方案: 在eclipse导出jar ...

  9. [Spring MVC] - 500/404错误处理

    Spring MVC中404 找不到页面错误可以直接使用web.xml中配置: 在<web-app/>节点内加入: <error-page> <error-code> ...

  10. 右键添加 CMD 命令提示符

    # 右键添加 CMD 命令提示符 当然是修改注册表   - 打开注册表编辑器(按下Win+R打开运行对话框,输入regedit),找到[HKEY_CLASSES_ROOT/Folder/shell] ...