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的区别的更多相关文章

  1. js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别

    js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...

  2. 【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别

    一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...

  3. Javascript:scrollWidth,clientWidth,offsetWidth的区别（转）

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

  4. 转：scrollWidth,clientWidth,offsetWidth的区别

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

  5. scrollWidth、clientWidth、offsetWidth、width的区别

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

  6. scrollWidth,clientWidth,offsetWidth的区别

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

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

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

  8. scrollWidth,clientWidth,offsetWidth的区别 ---转载的

    转载自博客:http://www.cnblogs.com/kongxianghai/p/4192032.html 通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容 ...

  9. css3: scrollLeft,scrollWidth,clientWidth,offsetWidth 的区别

    (需要提一下:CSS中的margin属性,与clientWidth.offsetWidth.clientHeight.offsetHeight均无关) offsetwidth:是元素相对父元素的偏移宽 ...

随机推荐

  1. 随机采样和随机模拟：吉布斯采样Gibbs Sampling实现文档分类

    http://blog.csdn.net/pipisorry/article/details/51525308 吉布斯采样的实现问题 本文主要说明如何通过吉布斯采样进行文档分类(聚类),当然更复杂的实 ...

  2. 深入剖析Tomcat会话机制

    1缓存机制 Tomcat默认将Session保存到内存中.但同时,Tomcat也提供了PersistentManager配合不同的Store实现的方式,使Session可以被保存到不同地方(Datab ...

  3. UNIX网络编程——UDP回射服务器程序（初级版本）以及漏洞分析

    该函数提供的是一个迭代服务器,而不是像TCP服务器那样可以提供一个并发服务器.其中没有对fork的调用,因此单个服务器进程就得处理所有客户.一般来说,大多数TCP服务器是并发的,而大多数UDP服务器是 ...

  4. 数据库隔离级别（mysql+Spring）与性能分析

     数据库隔离级别与Spring配置事务的联系及性能影响,以下是个人理解,如果有瑕疵请及时指正.   这里以mysql为例,先明确以下几个问题: 一.一般项目如果不自己配置事务的话,一般默认的是au ...

  5. java设计模式---状态模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述状态(State)模式的: 状态模式,又称状态对象模式(Pattern of Objects for States),状态模式是对象的行为 ...

  6. Device Tree Usage(理解DTS文件语法)

    Basic Data Format The device tree is a simple tree structure of nodes and properties. Properties are ...

  7. 《java入门第一季》集合框架引入与面试题

    注:在开始的几篇集合介绍里,不包含泛型的概念.泛型在讲述所有集合后再加入进去. 集合的由来:    我们学习的是面向对象语言,而面向对象语言对事物的描述是通过对象体现的,为了方便对多个对象进行操作,我 ...

  8. 《java入门第一季》之正则表达式常见规则

    正则表达式规则不用记住,只是知道是做什么用的即可.常见规则如下: A:字符 x 字符 x.举例:'a'表示字符a \\ 反斜线字符. \n 新行(换行)符 ('\u000A') (\\n来表示换行) ...

  9. listview异步加载图片并防止错位

    android listview 异步加载图片并防止错位 网上找了一张图, listview 异步加载图片之所以错位的根本原因是重用了 convertView 且有异步操作. 如果不重用 conver ...

  10. Leetcode_128_Longest Consecutive Sequence

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/43854597 Given an unsorted arra ...