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

innerWidth

这个则是浏览器视窗内可见区域宽度,当没有垂直滚动条时,它与clientWidth完全一样,如果有垂直滚动条,它会包含垂直滚动条宽度(一般为17)。

所以如果要获取垂直滚动条宽度,可以:

滚动条宽度=innerWidth -clientWidth

如果你要获取某个DIV的实际宽高,不管它是否有滚动条,应该用offsetWidth、offserHeight
而clientWidth则可用于计算垂直滚动条实际宽度(有时候垂直滚动条的宽度是自定义的,就不是默认的17了)

情况1:

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

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

offsetWidth为元素的实际宽度。

情况2:

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

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

以上。

scrollWidth clientWidth offsetWidth的更多相关文章

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

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

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

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

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

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

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

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

  5. H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)

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

  6. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明

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

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

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

  8. scrollWidth,clientWidth,offsetWidth的区别

      通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...

  9. web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别

    通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...

  10. 转:scrollWidth,clientWidth,offsetWidth的区别

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

随机推荐

  1. SqlServer Function

    set quoted_identifier on; set ansi_nulls on; go create function [dbo].[Get_StrArrayStrOfIndex] ( @st ...

  2. 我的FPGA

    转眼间我都工作三个年头了,这两年多时间我一直从事着FPGA测试工作,从一开始的懵懂无知,到现在的些许理解,我想记录和分享我对FPGA测试的理解. 之所以选择在博客园写这样,是我发现在这里阅览文章不需要 ...

  3. codevs1961 躲避大龙

    1961 躲避大龙  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 你早上起来,慢悠悠地来到学校门口, ...

  4. [备忘]git常用命令

    网站有点儿久没有维护(因为去做其他事情了呗),现在空下来,回来改了网站的一些东西,却忘记了git的一些常用的命令,于是便写下这篇文,方便查阅,免得每次都去看手册(毕竟我懒啊!!) 检查当前文件状态:g ...

  5. Django REST framework - 解析器和渲染器

    目录 Django REST framework - 解析器和渲染器 解析器 Django中的数据解析 DRF中的解析器 渲染器 Django REST framework - 解析器和渲染器 解析器 ...

  6. 6.4.1 标准库 os、os.path 与 shutil 简介

    os模块除了提供使用操作系统功能和访问文件系统的简便方法之外,还提供了大量文件与文件夹操作的方法,如下表所示. 方法 功能说明 access(path,mode) 按照 mode 指定的权限访问文件 ...

  7. Java基础学习总结(74)——Java常见笔试题及答案汇总

    1. 下面哪些是合法的标识符?(ABE )--标识符 A. $persons B. TwoUsers C. *point D. this E. _endline 2. 下面程序运行的结果是( D )- ...

  8. centOS下安装mysql workbench详细步骤

    step0:安装mysql 在按照workbench之前,先安装mysql.指令是 yum install mysql mysql-server mysql-libs mysql-server 关于m ...

  9. 激活Windows

    额外的启动参数(键):/win=act – 在隐藏模式下运行程序,激活 Windows 并退出程序./ofs=act – 在隐藏模式下运行程序,激活 Office 并退出程序./wingvlk – 在 ...

  10. MySql 格式化时间(包括正常时间格式与unix时间戳的互相转换)

    函数:FROM_UNIXTIME 作用:将MYSQL中以INT(11)存储的时间以"YYYY-MM-DD"格式来显示.语法:FROM_UNIXTIME(unix_timestamp ...