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的区别的更多相关文章

  1. Javascript:scrollWidth,clientWidth,offsetWidth的区别(转)

    网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域高:document.body.offsetW ...

  2. scrollWidth,clientWidth,offsetWidth的区别

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

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

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

  4. scrollWidth,clientWidth,offsetWidth的区别 ---转载的

    转载自博客:http://www.cnblogs.com/kongxianghai/p/4192032.html 通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容 ...

  5. css3: scrollLeft,scrollWidth,clientWidth,offsetWidth 的区别

    (需要提一下:CSS中的margin属性,与clientWidth.offsetWidth.clientHeight.offsetHeight均无关) offsetwidth:是元素相对父元素的偏移宽 ...

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

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

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

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

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

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

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

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

随机推荐

  1. 使用a标签实现文件的下载与保存

    <a>标签的常规使用是定义超链接,用于从一个页面链接到另一个页面,并且需要指定链接目标href,除了定义超链接外,<a>还可以实现文件的保存,直接设置a标签的href属性,但是 ...

  2. Spring IOP 面向切面编程

    Spring IOP  面向切面编程 AOP操作术语 Joinpoint(连接点):所谓连接点是指那些被拦截到的点.在spring中,这些点指的是方法,因为spring只支持方法类型的连接点.(类里面 ...

  3. MYSQL jdbc autoReconnect

    http://blog.csdn.net/a9529lty/article/details/7104351 http://blog.163.com/huangfei_person/blog/stati ...

  4. ASP.NET MVC自定义异常处理

    1.自定义异常处理过滤器类文件 新建MyExceptionAttribute.cs异常处理类文件

  5. docker:Dockerfile构建LNMP平台

    docker:Dockerfile构建LNMP平台   1.dockerfile介绍  Dockerfile是Docker用来构建镜像的文本文件,包含自定义的指令和格式.可以通过docker buil ...

  6. SQLSERVER 备份数据库的注意事项

    1. SQLSERVER 有一个压缩备份集的功能,能够实现大概15%的压缩比(跟数据类型不同而不同) 之前竟然没发现...浪费了好多磁盘资源.. 多学习多思考..

  7. SAP PP顾问面试题及资料

    SAP PP顾问面试试题及资料 1.主数据 组织架构 •SAP中主要的组织架构有哪些?哪些用于PP的组织架构?•成本控制范围.公司代码.估价范围.工厂.库存地点之间的关系 物料主数据 •不同的物料主数 ...

  8. 微信小程序入門學習資料鏈接

    https://blog.csdn.net/github_38847071/article/details/73250258 https://blog.csdn.net/lily2016n/artic ...

  9. iTunes 12.7 没有应用程序选项了,重新安装iTunes 12.6.3

    iTunes 12.6.3 下载地址: Mac http://t.cn/RO5rIfE Win 32 http://t.cn/ROtta1T Win64 http://t.cn/ROtta1n 安装好 ...

  10. Spark_RDD之简单Java函数接口

    函数名 实现的方法 用途 Function<T, R> R call(T) 接收一个输入值并返回一个输出值,用于类似 map() 和filter() 等操作中 Function2<T ...