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. This Android SDK requires Android Developer Toolkit version 17.0.0 or above. Current version is 10.0.0.v201102162101-104271. Please update ADT to the latest version.

    win7/xp 下面安装Android虚拟机,更新SDK后,在Eclipse preference里指向android-sdk-windows时. 出现 : This Android SDK requ ...

  2. 嵌入式linux教程

    串口通信minicom $ sudo apt-get install minicom ///安装 # minicom –s //运行 //CTRL+A Z 弹出菜单       2.NFS网络文件配置 ...

  3. Cron任务调度CronNET

    Cron任务调度CronNET 阅读目录 1.Cron介绍和工具 2.CronNET介绍和使用 3.cron-expression-descriptor使用 4.资源 如果用知乎,可以关注专栏:.NE ...

  4. #Leetcode# 788. Rotated Digits

    https://leetcode.com/problems/rotated-digits/ X is a good number if after rotating each digit indivi ...

  5. PyXB: Python XML Schema Bindings

    http://pyxb.sourceforge.net/ PyXB (“pixbee”) is a pure Python package that generates Python source c ...

  6. 开源的CAS实现SSO

    https://www.ibm.com/developerworks/cn/opensource/os-cn-cas/index.html ISC是基于CAS定制的,使用的高级的代理模式. https ...

  7. Spring Cloud 路由网关服务端

    修改application.properties配置文件:服务端口号.本机名称: 启动注册中心:java -jar uap-register-server-1.0.jar --spring.confi ...

  8. SAP顾问岗位要求

    岗位职责: 1.负责SAP系统各模块日常运维工作,解决用户在系统操作过程中遇到的问题: 2.评估用户需求(新需求.功能优化)的可实现性,完成SAP系统及相关系统的配置调整及功能实现: 3.负责CRM等 ...

  9. C/C++的内存泄漏检测工具Valgrind memcheck的使用经历

    Linux下的Valgrind真是利器啊(不知道Valgrind的请自觉查看参考文献(1)(2)),帮我找出了不少C++中的内存管理错误,前一阵子还在纠结为什么VS 2013下运行良好的程序到了Lin ...

  10. 将ubuntu14.04 从mysql从5.5删除之后安装5.7遇到的一些问题(本篇不讨论热升级)

    五一放假实在无聊 继续玩弄新的服务器.发现有台mysql版本实在有点老,估计是akiho直接使用 apt-get install mysql-server ,然后又没有更新到最新的源,然后无脑安装了5 ...