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:是元素相对父元素的偏移宽 ...
随机推荐
- hive中使用case、if：一个region统计业务（hive条件函数case、if、COALESCE语法介绍:CONDITIONAL FUNCTIONS IN HIVE）
前言:Hive ql自己设计总结 1,遇到复杂的查询情况,就分步处理.将一个复杂的逻辑,分成几个简单子步骤处理. 2,但能合在一起的,尽量和在一起的.比如同级别的多个concat函数合并一个selec ...
- 【UNIX环境高级编程】文件 IO 操作 一 ( open | close | creat | lseek | write | read )
博客地址 : http://blog.csdn.net/shulianghan/article/details/46980271 一. 文件打开关闭操作相关函数介绍 1. open 函数 (1) op ...
- JAVA之旅（二十六）——装饰设计模式，继承和装饰的区别，LineNumberReader，自定义LineNumberReader，字节流读取操作，I/O复制图片
JAVA之旅(二十六)--装饰设计模式,继承和装饰的区别,LineNumberReader,自定义LineNumberReader,字节流读取操作,I/O复制图片 一.装饰设计模式 其实我们自定义re ...
- Hadoop的运行痕迹
http://www.cnblogs.com/forfuture1978/archive/2010/11/23/1884967.html 一篇讲的很好的 hadoop 基本运行环境配置信息
- Android的stateListDrawable，layerDawable，clipdrawable，AnimationDarwable介绍-android学习之旅（五十五）
StatelistDrawable资源 代码示例 <?xml version="1.0" encoding="utf-8"?> <select ...
- 记一个逻辑bug
1 从数据库中找出一个学生能选的毕业设计(毕设的select or not 字段表示本题目是否已经被选 此时就按照其值为n来查询) 2 用户选择某个毕设后,先更新毕设表(select ...
- 认证模式之Digest模式
TTP协议规范的另一种认证模式是Digest模式,在HTTP1.1时被提出来,它主要是为了解决Basic模式安全问题,用于替代原来的Basic认证模式,Digest认证也是采用challenge/re ...
- 基于Android的手机程序----口袋理财(13年版)
主页面 记账模块 司机模块 司机明细 司机记录 贷款计算 其他功能 收支一览 统计报表 购物计划 设置模块 使用说明 收支项目 项目添加
- 【一天一道LeetCode】#48. Rotate Image
一天一道LeetCode系列 (一)题目 You are given an n x n 2D matrix representing an image. Rotate the image by 90 ...
- STL - string（典型操作demo）
1String概念 string是STL的字符串类型,通常用来表示字符串.而在使用string之前,字符串通常是用char*表示的.string与char*都可以用来表示字符串,那么二者有什么区别呢 ...