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. 《Linux内核分析》第四周学习总结

    <Linux内核分析>第四周学习总结                         ——扒开系统调用的三层皮 姓名:王玮怡  学号:20135116 理论总结部分: 第一节 用户态.内核 ...

  2. Linux内核分析作业五

    扒开系统调用的三层皮(下) 给MenuOS增加time和time-asm命令 步骤 rm menu -rf //强制删除 git clone http://github.com/menging/men ...

  3. Hibernate_HQL

    public class According_condition { public static void main(String[]args){ Session session=HibernateU ...

  4. Geekers团队成立日志

    大家好,作为团队的队长,今天在这里非常荣幸能够发表我们团队的第一篇博客,来宣布我们团队的名字:Geekers! Geek,英文中代表“怪人”,随着时代进步Geek被赋予了新的含义——极客!Steve ...

  5. python2 与 python3 实现共存

    已有配置  Anaconda2+python2.7 方案一:直接安装官网原生python3.6 1.修改根目录下python.exe ->python3.exe    pythonw.exe - ...

  6. 面象对象设计原则之一:单一职责原则(Single Responsibility Principle, SRP)

    单一职责原则是最简单的面向对象设计原则,它用于控制类的粒度大小.单一职责原则定义如下:单一职责原则(Single Responsibility Principle, SRP):一个类只负责一个功能领域 ...

  7. Docker镜像加速设置

    地址:https://www.daocloud.io/mirror#accelerator-doc 配置 Docker 加速器 Linux MacOS Windows curl -sSL https: ...

  8. springMVC 使用WebApplicationContext获取ApplicationContext对象

    主要用于从application中获取bean 1.applicationContext 在web.xml中使用listener配置 <context-param> <param-n ...

  9. 普通javabean 获得项目的绝对路径

    方式一:String path = RequestContext.class.getResource("/").getFile();

  10. Layui_2.x_上传插件使用

    一.上传类 package com.ebd.application.common.utils; import java.awt.geom.AffineTransform; import java.aw ...