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. mysql 字符集查看 设定

    (1) 最简单的修改方法,就是修改mysql的my.ini文件中的字符集键值, 如 default-character-set = utf8 character_set_server = utf8 修 ...

  2. 最简单的视频网站（JavaEE+FFmpeg）

    本文记录一个最简单的视频网站系统.此前做过一些基于JavaEE中的SSH (Strut2 + Spring + Hibernate)的网站系统,但是一直没有做过一个视频网站系统,所以就打算做一个&qu ...

  3. iOS中 陀螺仪/加速器 韩俊强的博客

    引进框架: #import <CoreMotion/CoreMotion.h> 定义属性初始化相关: #import "ViewController.h" #impor ...

  4. pig limit 少于10行，会返回所有记录

    my = limit g_log 3; STORE my INTO '/user/wizad/tmp/my' USING PigStorage(','); 这样会返回g_log的所有记录. 要大于等于 ...

  5. 手机广告投放（phone advertising）唯一标识

    手机标示,为了识别用户,方面advertising. 使用设备id,相当于暴露用户隐私.慢慢已不允许使用.. (长时间跟踪用户无异于暴露用户隐私,虽然大量数据适合兴趣建模,广告个性化推荐.但复杂多样会 ...

  6. jdbc连接sql数据库

    JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...

  7. Socket编程实践(6) --TCP服务端注意事项

    僵尸进程处理 1)通过忽略SIGCHLD信号,避免僵尸进程 在server端代码中添加 signal(SIGCHLD, SIG_IGN); 2)通过wait/waitpid方法,解决僵尸进程 sign ...

  8. Leetcode_26_Remove Duplicates from Sorted Array

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41558551 Remove Duplicates from ...

  9. 下载Ext JS 5.1 gpl版本的方法

    先进入官网:http://www.sencha.com 然后在导航的Products中选择Sencha Ext JS,会看到以下页面: 这时候不要单击Download按钮,而是要单击导航中的DETAI ...

  10. 重构前VS重构后效果对比

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42554641 学习重构已经一个多月了,虽然不能让代码特别的 ...