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. 8.1.3 Row对象

    假设数据以下面的方式创建并插入数据: import sqlite3 conn = sqlite3.connect(r'D:\test.db') c = conn.cursor() c.execute( ...

  2. unigui的菜单树补习【2】treeview

    Treeview用于显示按照树形结构进行组织的数据.           Treeview控件中一个树形图由节点(TreeNode)和连接线组成.TtreeNode是TTreeview的基本组成单元. ...

  3. 实现selenium+Chrome爬取时不加载图片——配置

    # -*- coding:utf-8 -*- from selenium import webdriver ''' 设置页面不加载图片,这样可以加快页面的渲染,减少爬虫的等待时间,提升爬取效率 固定配 ...

  4. [UOJ#35] [UOJ后缀数组模板题] 后缀排序 [后缀数组模板]

    后缀数组,解决字符串问题的有利工具,本题代码为倍增SA算法 具体解释详见2009年国家集训队论文 #include <iostream> #include <algorithm> ...

  5. EF--model is being created异常

    使用EF的时候出现了下面的异常,我使用了TASK和saveChangeAsync()异步 The context cannot be used while the model is being cre ...

  6. [bzoj2599][IOI2011]Race_树上点分治

    Race bzoj-2599 题目大意:询问一颗树上最短的.长度为k的链,边有边权,n个节点. 注释:$1\le n \le 2\cdot 10^5$,$1\le k \le 10^6$. 想法:树上 ...

  7. cogs 290. [CTSC2000] 丘比特的烦恼

    290. [CTSC2000] 丘比特的烦恼 ★★★   输入文件:cupid.in   输出文件:cupid.out   简单对比时间限制:1 s   内存限制:128 MB 随着社会的不断发展,人 ...

  8. CSUOJ 1329 一行盒子(数组模拟链表)

    题目:id=1329">http://acm.csu.edu.cn/OnlineJudge/problem.php? id=1329 题意: watermark/2/text/aHR0 ...

  9. 【SDOI2008】【BZOJ2049】Cave 洞穴勘測

    Description 辉辉热衷于洞穴勘測.某天,他依照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘測,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成.而且每条通道连接了恰好 ...

  10. Rockchip平台TP驱动详解【转】

    本文转载自:http://blog.csdn.net/encourage2011/article/details/51679332 本文描述在RK3126平台上添加一个新的TP驱动(gslx680驱动 ...