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. 我的github地址 https://github.com/1010de/Test.git

    构建之法老师叫交下任务学习github,经过一段时间的学习和了解,看介绍.看视频.看博客.初步认识到github的方便与好处.     自己试着去注册和使用github,已经慢慢学会了一些基本操作. ...

  2. Github上传更新

    通过2天的时间,不停的网上找各种资料,今天下午终于可以登录上github for Windows 客户端了,,, 然后通过一整晚的摸索,也把项目上传到github里. github地址:https:/ ...

  3. 第三个Sprint冲刺第五天(燃尽图)

  4. tensorflow win10 系统下安装

    安装tensorflow gpu版本 Step1 安装CUDA8.0 进入这个云盘地址下载,密码5aoc 进行CUDA8.0下载.下载完成后解压,打开exe文件直接按照默认进行安装,安装步骤比较繁琐, ...

  5. Oracle 使用PDB 的情况下进行备份恢复的使用.

    1. 关于directory: pdb 需要在container 上面创建directory才可以使用 CDB里面创建的directory是会无反应. 在PDB 里面创建: cmd 之后运行 set ...

  6. python threading模块使用 以及python多线程操作的实践(使用Queue队列模块)

    今天花了近乎一天的时间研究python关于多线程的问题,查看了大量源码 自己也实践了一个生产消费者模型,所以把一天的收获总结一下. 由于GIL(Global Interpreter Lock)锁的关系 ...

  7. html 塊 div span

    塊級元素:元素結束后,另起一行:如p,table,h1,ul,ol 內聯元素:元素結束后,不會另起一行:如a,td.image.b <div>是塊級元素,div本身沒有含義,div是htm ...

  8. matplotlib之随机漫步

    # 随机漫步类 from random import choice from matplotlib import pyplot as plt from pylab import mpl from ma ...

  9. httprequest存储的是字符内容 而文本内容是以字节形式上传的;所以普通的取值方式无法从httprequest取到值

    httprequest存储的是字符内容 而文本内容是以字节形式上传的;所以普通的取值方式无法从httprequest取到值

  10. map()实现zip()功能

    c = (map(lambda x,y:(x,y),[1,2,3],["abd","def","ghi"]))print(list(c)) ...