scrollWidth clientWidth offsetWidth
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的更多相关文章
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...
- scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动(冻结)的效果
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位 ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...
- H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLef ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth具体指完全解释究竟哪里的距离scrollHeight: 获取对象的高度滚动. scrollLe ...
- 转 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...
- scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...
- web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...
- 转:scrollWidth,clientWidth,offsetWidth的区别
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...
随机推荐
- ESP、EBP、CALL 指令与局部变量浅析
概述 函数调用是计算机程序中一个最重要的概念之一,从汇编的角度看,能更加直观地理解函数调用的原理,理解 CALL 指令调用过程中 ESP.EBP 寄存器的作用. 我们先从一段简陋的 C 语言代码说起, ...
- hbase + phoenix 单机版安装
1. 环境: centos 6.5 jdk 1.8.0 http://www.oracle.com/te ...
- (C/C++学习)12.获取系统时间制作时钟(system()略解)
说明:通过调用函数来获取系统当前时间,并制作一个数字式的时钟,时钟的显示包括年.月.日.小时.分以及秒,通过系统屏幕的刷新来对不断更新的时间进行屏幕的显示. 一.对相关函数的学习 1.time_t t ...
- Robberies (01背包dp变形)
题意:一个强盗要抢劫银行又不想被抓到,所以要进行概率分析求他在不被抓的情况下能抢最多的钱.他给定T(样例个数),N(要抢的银行的个数),P(被抓的概率要小于P)Mj(强盗能抢第j个银行Mj元钱),Pj ...
- 小白神器 - 一篇博客学会HTML
小白神器 - 一篇博客学会HTML 一. 简介 1. HTML 定义 htyper text markup language 即超文本标记语言. 超文本: 就是指页面内可以包含图片.链接,甚至音乐. ...
- PAT 1111 Online Map
Input our current position and a destination, an online map can recommend several paths. Now your jo ...
- MapReduce Shuffle优化方向
Shuffle过程介绍可以查看该博客:http://langyu.iteye.com/blog/992916 优化方向: 压缩:对数据进行压缩,减少写读数据量: 减少不必要的排序:并不是所有类型的Re ...
- R语言为数据框添加列名或行名
1.添加列名 wts=c(1,1,1) names(wts)=c("setosa","versicolor","virginica") 2. ...
- 网站配置https(腾讯云域名操作)
我们都知道http协议是超文本传输协议,早期的网站使用的都是http,但是并不安全,数据在传输过程中容易被拦截篡改.所以后面有了https,也就是经过ssl加密的http协议.本文主要对网站配置htt ...
- HDU 5502
枚举所有的最大值盒子里糖果为K的情况,对于位置p,dp[p]为p以前的,第p个操作为抽到不是蓝球里的情况,盒子里最多糖果为k的情况的概率.而到p这个位置,可以有连续最多k-1(因为第k个操作必须为抽到 ...