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. 如何找到java对应的c/c++源码

    很多时候java经常被c鄙视,因为c说我是你的基础,但java竟然有如此强的生命力就必然有其存在的价值.本文不探讨各种开发语言的优劣,仅仅介绍如何找到java对应c/c++实现的源码.当我们追究一个j ...

  2. 如何在Cocos2D 1.0 中掩饰一个精灵(三)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 尝试编译运行,在你每一次点击屏幕的时候,你将看到我可爱的妻子制作 ...

  3. 论文系统Step1:从日志记录中提取特定信息

    论文系统Step1:从日志记录中提取特定信息 前言 论文数据需要,需要实现从服务器日志中提取出用户的特定交互行为信息.日志内容如下: 自己需要获取"请求数据包一行的信息"及&quo ...

  4. SHA算法

    安全Hash函数(SHA)是使用最广泛的Hash函数.由于其他曾被广泛使用的Hash函数都被发现存在安全隐患,从2005年至今,SHA或许是仅存的Hash算法标准. SHA发展史 SHA由美国标准与技 ...

  5. MySQL数据库内置函数

    mysql数据库中提供了很丰富的函数.mysql函数包括数学函数.字符串函数.日期和时间函数.条件判断函数.系统信息函数.加密函数.格式化函数等.通过这些函数,可以简化用户的操作. 简单介绍几类函数的 ...

  6. Cocos2D旋转炮塔到指定角度(三)

    到目前为止都很美好! 但是却有一点奇怪,因为炮塔一下子跳转到指定位置去射击,并不是平滑的跟随触摸去转动到指定位置.你可以修复这个问题,但是这需要略微一点的重构(refactoring). 首先打开He ...

  7. XML跨平台，你懂的

    XML跨平台,你懂的 [引子]       90后小妹,问我,"都说XML跨平台,偶真的,不理解.XML语言的这大优势,倒是深深记在脑海里了."      当然,偶立马应声答到,& ...

  8. Visual Studio2010 安装pthreads2.9.1

    本人最近要利用多线程进行编程,前面一篇博文讲解的是利用VC自带的一些函数库,这里重点探讨一下如何配置pthreads2.9.1的Visual Studio2010的环境.本文分为两个部分,第一部分给出 ...

  9. ZooKeeper实现分布式锁

    使用场景          一般的锁是指单进程多线程的锁,在多线程并发编程中,用于线程之间的数据同步,保证共享资源的访问.而分布式锁,指的是在分布式环境下,保证跨进程.跨主机.跨网络的共享资源,实现互 ...

  10. Linux进程实践(5) --守护进程

    概述 守护进程是在需要在后台长期运行不受终端控制的进程,通常情况下守护进程在系统启动时自动运行,在服务器关闭的时候自动关闭:守护进程的名称通常以d结尾,比如sshd.xinetd.crond.atd等 ...