转载自博客:http://www.cnblogs.com/kongxianghai/p/4192032.html

通过一个demo测试这三个属性的差别。

说明:

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。 
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。 
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。

该demo就在页面中放一个textarea元素,采用默认宽高显示。

情况1:

元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。

scrollWidth=clientWidth,两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2:

元素的内容超过可视区,滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

scrollWidth,clientWidth,offsetWidth的区别 ---转载的的更多相关文章

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

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

  2. 转:scrollWidth,clientWidth,offsetWidth的区别

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...

  3. scrollWidth,clientWidth,offsetWidth的区别

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

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

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

  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. 内核加载模块时提示usb_common: exports duplicate symbol of_usb_get_dr_mode

    1.分析: 既然符号重复了,那么说明有一个部分既被编译到内核中也被编译成模块了,因此在加载模块时,内核报符号重复的提示 2.解决 直接配置内核的某一部分编译成模块,例如笔者就直接将USB这一部分编译成 ...

  2. 使用 switch 对值进行分支

    与处理 TRUE 和 FALSE 条件的 if 相比,switch 语句则是用来处理数字或者字符串,并根据输入返回某个分支.假设输入一个整数 n,switch 返回从第 1 个参数开始的第 n 个参数 ...

  3. php---------取汉字的第一个字的首字母

    开发中用到的方法,取出第一个汉字的首字母: /** * 取汉字的第一个字的首字母 * @param string $str * @return string|null */ function getF ...

  4. 数论练习(5)——青蛙的约会(扩gcd)

    青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 122502   Accepted: 26015 Descript ...

  5. iOS UI-静态单元格与动态单元格

  6. springboot问题集(一)------junit内Assert.assertEquals()的含义

    1. assertEquals([String message],Object target,Object result) target与result不相等,中断测试方法,输出message asse ...

  7. 导入arr包

    提起项目的aar包 导入目标项目中 添加依赖 

  8. CAM350对比两个gerber之间的差异

    今天客供的gerber 版本更新,要检查区别. 参考: https://wenku.baidu.com/view/a154028c19e8b8f67d1cb93f.html 这个更加详细: https ...

  9. React Native自适应设备宽度解决方案

    px:设备实际像素单位 dp/pt:逻辑像素单位(IOS的尺寸单位为pt,Android的尺寸单位为dp) 在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面. UI 给默认 640 的图,采用 ...

  10. Alpha阶段敏捷冲刺---Day1

    一.Daily Scrum Meeting照片 二.今天冲刺情况反馈 1.昨天已完成的工作    昨天我们组全体成员在五社区五号楼719召开了紧急会议,在会议上我们梳理了编写这个程序的所有流程,并且根 ...