转:scrollWidth,clientWidth,offsetWidth的区别
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
该demo就在页面中放一个textarea元素,采用默认宽高显示。
情况1:
元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。
scrollWidth=clientWidth,两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。

情况2:
元素的内容超过可视区,滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。

ps:区别于 getComputedStyle(ele).width
getComputedStyle只会显示出css综合优先级计算后的结果,如果没有设置可能会是auto等
但是ele.offsetWidth显示出实际的宽度:不会显示auto这种结果
转:scrollWidth,clientWidth,offsetWidth的区别的更多相关文章
- Javascript:scrollWidth,clientWidth,offsetWidth的区别(转)
网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域高:document.body.offsetW ...
- scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...
- web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...
- scrollWidth,clientWidth,offsetWidth的区别 ---转载的
转载自博客:http://www.cnblogs.com/kongxianghai/p/4192032.html 通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容 ...
- css3: scrollLeft,scrollWidth,clientWidth,offsetWidth 的区别
(需要提一下:CSS中的margin属性,与clientWidth.offsetWidth.clientHeight.offsetHeight均无关) 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 ...
随机推荐
- Linux期末总结
Linux内核学习总结 1.计算机是如何工作的? 存储程序计算机工作模型 X86汇编基础 汇编一个简单的C程序分析其汇编指令执行过程 2.操作系统是如何工作的? 三个法宝——存储程序计算机.函数调用堆 ...
- 我的Android之路——底部菜单栏的实现
底部菜单栏的实现 底部菜单栏两种实现方法:ViewPager:可滑动的界面:Fragment:固定的界面. 首先,页面布局,在除去顶部toolbar之后,将主界面分为两部分,一部分为界面显示区,另一部 ...
- TCP系列11—重传—1、TCP重传概述
在最开始介绍TCP的时候,我们就介绍了TCP的三个特点,分别是面向连接.可靠.字节流式.前面内容我们已经介绍过了TCP的连接管理,接下来的这部分内容将会介绍与TCP可靠性强关联的TCP重传. 很多网络 ...
- chrome启用flash不询问
69版本之后 打开 chrome://flags/#enable-ephemeral-flash-permission 把它从Default改为Disabled 重新打开Chrome,进入 chrom ...
- [转帖] 从零开始编写自己的C#框架(27)——什么是开发框架
从零开始编写自己的C#框架(27)——什么是开发框架 http://www.cnblogs.com/EmptyFS/p/4105713.html 没写过代码 一直不清楚 框架的含义 不过看了一遍 也没 ...
- python3_列表、元组、集合、字典
列表list #列表的基本操作 >>> a=[] #创建空列表 >>> a = [0,1,2,3,4,5] #创建列表并初始化,列表是[]包含由逗号分隔的多个元素组 ...
- mysql数据库优化大全
转载:https://blog.csdn.net/weixin_38112233/article/details/79054661 数据库优化 sql语句优化 索引优化 加缓存 读写分离 分区 分布式 ...
- OA与BPM的区别
BPM OA 软件架构 JAVA..NET.基于SOA架构 JAVA..NET.PHP.Domino 驱动模式 流程驱动 文档驱动 交互 人与人,人与系统,系统与系统 人与人 软件功能 ...
- 如何实现圆形的进度条(ProgressBar)
在我们实际的工作中可能经常使用到圆形的进度条,但是这是怎么实现的呢?其实这只不过是修改了一下ProgressBar的模板,我们在下面的代码中我们将ProgressBar的Value值绑定到Border ...
- CnPack实用功能推荐
已经使用CnPack好几年了,这个插件太好了,现在离开它我都不会写代码了,现在将使用心得与大家分享一下: 1.代码助手非常好用,只需要输入几个字符后,自动出现提示列表,真是懒人的福音呀. 2.代码高亮 ...