<html>
<head>
<title>clientWidth,offsetWidth,scrollWidth区别</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>

在文本框内输入内容，当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。当一行内容超出文本框的宽度，就有横向滚动条出来了，scrollWidth的值就变了。scrollWidth是对象实际内容的宽度。  
clientWidth是对象看到的宽度（不含边线）。

offsetWidth的值总是比clientWidth的值大。
offsetWidth是对象看到的宽度（含边线，如滚动条的占用的宽）

clientWidth,offsetWidth,scrollWidth区别的更多相关文章

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

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

  2. JS中关于clientWidth offsetWidth scrollWidth 的区别及意义

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

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

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

  4. scrollWidth,clientWidth,offsetWidth的区别

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

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

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

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

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

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

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

  8. JS中关于clientWidth offsetWidth scrollWidth 等的区别

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

  9. JS中关于clientWidth offsetWidth scrollWidth 等的含义

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

随机推荐

  1. 页面调用qq

    tencent://message/?uin=516999605&Site=&Menu=yes

  2. Mysql索引基础原理

    索引的概念 索引是特殊数据结构:  定义在查找时作为查找条件的字段 索引实现在存储引擎 功能: 1.约束数据 2.加速查询 优点: 索引可以降低服务需要扫描的数据量,减少了IO次数 索引可以帮助服务器 ...

  3. 什么是AOP面向切面编程

    什么是AOP 连接地址:http://blog.csdn.net/moreevan/article/details/11977115/ AOP(Aspect-OrientedProgramming,面 ...

  4. Scala辅助构造器和主构造器

    和java或c++一样,scala也可以有任意多的构造器.不过,scala类有一个构造器比其它所有构造器都更为重要,它就是主构造器.除了主构造器之外,类还可以有任意多的辅助构造器. 有两点需要注意: ...

  5. fasttext学习笔记

    When to use FastText? The main principle behind fastText is that the morphological structure of a wo ...

  6. centos 下python升级

    https://www.cnblogs.com/leon-zyl/p/8422699.html

  7. jenkins 邮箱配置---腾讯企业邮箱

    一,简单设置 1.登陆jenkins--> 系统管理 ---> 系统设置 2.邮箱就是发送者的邮箱,密码是登陆邮箱的密码 3.设置完以后,可以点击‘test configuration’, ...

  8. CentOS6.5配置MYSQL一主多从详解

    一.环境 操作系统 :CentOS 6.5 数据库版本:MySQL 主机A:192.168.1.1 (Master) 从机B:192.168.1.2 (Slave) 从机B:192.168.1.3 ( ...

  9. 20165321 2017-2018-2《Java程序设计》课程总结

    每周作业链接汇总 预备作业1:20165321 我期望的师生关系 预备作业2:20165321 学习基础与C语言学习心得 预备作业3:20165321预备作业3:Linux安装及命令入门 第一周作业: ...

  10. MySQL数据类型--与MySQL零距离接触2-5字符型

    CHAR(5) : 存储abc时,由于长度不够,所以abc后面会补充2个空格,也就是abc CHAR 0-255字节 定长字符串 VARCHAR 0-65535 字节 变长字符串 ENUM('valu ...