scrollWidth,clientWidth与offsetWidth的区别
scrollWidth
是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。
clientWidth
是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
offsetWidth
是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
一个scrollWidth和clientWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
在文本框内输入内容，当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。当一行内容超出文本框的宽度，就有横向滚动条出来了，scrollWidth的值就变了。
scrollWidth是对象实际内容的宽度。
clientWidth是对象看到的宽度（不含边线），这个例子里不会改变。
一个clientWidth和offsetWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
offsetWidth的值总是比clientWidth的值大。
clientWidth是对象看到的宽度（不含边线）
offsetWidth是对象看到的宽度（含边线，如滚动条的占用的宽）
scrollWidth,clientWidth与offsetWidth的区别的更多相关文章
- js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...
- 【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别
一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...
- Javascript:scrollWidth,clientWidth,offsetWidth的区别（转）
网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域高:document.body.offsetW ...
- 转：scrollWidth,clientWidth,offsetWidth的区别
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...
- scrollWidth、clientWidth、offsetWidth、width的区别
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...
- scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...
- web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...
- scrollWidth,clientWidth,offsetWidth的区别 ---转载的
转载自博客:http://www.cnblogs.com/kongxianghai/p/4192032.html 通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容 ...
- css3: scrollLeft,scrollWidth,clientWidth,offsetWidth 的区别
(需要提一下:CSS中的margin属性,与clientWidth.offsetWidth.clientHeight.offsetHeight均无关) offsetwidth:是元素相对父元素的偏移宽 ...
随机推荐
- Mybatis代码自动生成插件使用
1.配置pom.xml 添加mybatis-generator-maven-plugin到pom.xml. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- javascript之事件模型
事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反 DOM标准事件模型:D ...
- Swift基础之闭包Closure学习
首先Swift语言中没有了Block内容,但是你可以通过调用OC文件使用,也可以使用Closure(闭包),实现Block或者Delegae同样反向传值或回调函数的效果,也可以解决函数指针的问题,两者 ...
- 程序员大牛 Jeff Atwood 的两本中文书
程序员大牛,StackOverflow.com创始人之一--Jeff Atwood 英文博客:http://blog.codinghorror.com <高效能程序员的修炼>,人民邮电出版 ...
- mysql filesort 的解决方案
在explain我们所使用的sql的时候,经常会遇到using filesort这种情况,原以为是由于有相同列值的原因引起,结果昨天看到公司的一个sql,跟同事讨论了下加上自己又做了一些测试,突然发现 ...
- flex 强制转换类型失败无法将object转换为XXX
错误描述 flex在加载module时报出如题所示的错误, 实际表现 问题就出现在这 我取消这个错误提示框 再次在前台查询数据 就一切ok 问题就出现在这一句 var zoufangModel:ZfR ...
- UITableView大总结(上)
1.UITableView继承UIScrollView. 2.实例一城市列表思路: 步骤一:创建UITableView.UITableView样式为组 步骤二:设置UITableView的数据源方法. ...
- iOS 动画总结—UIView动画
1.概述 UIKit直接将动画集成到UIView类中,实现简单动画的创建过程.UIView类定义了几个内在支持动画的属性声明,当这些属性发生改变时,视图为其变化过程提供内建的动画支持. 执行动画所需要 ...
- [WinForm]dataGridView动态加载以本地图片显示列
增加一个图片列: C# private void btnQuery_Click(object sender, EventArgs e) { StringBuilder sb=new StringBui ...
- mongodb系列之--分片的原理与配置
1.分片的原理概述 分片就是把数据分成块,再把块存储到不同的服务器上,mongodb的分片是自动分片的,当用户发送读写数据请求的时候,先经过mongos这个路由层,mongos路由层去配置服务器请求分 ...