<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. delphi中的 IntToHex()

    Delphi 自带函数 IntToHex 功能说明:该函数用于将“十进制”转换成“十六进制”.该函数有二个参数.第一个参数为要转换的十进制数据,第二个参数是指定使用多少位来显示十六进制数据. 参考实例 ...

  2. java 数组（二）

    public class ArrayDemo{ public static void main(String[] args){ int[] arr = {1,5,3,8,2,9,17,13}; get ...

  3. Orchard Core 中数据库使用postgresql-10

    在配置好Startup.cs后,运行程序: 首先需要设置一些基本信息.这里我试着配置如下,数据库使用postgresql,连接字符串像这样: Host=192.168.0.111;UserName=u ...

  4. 洛谷P2303 [SDOi2012] Longge的问题 数论

    看懂了题解,太妙了TT但是想解释的话可能要很多数学公式打起来太麻烦了TT所以我就先只放代码具体推演的过程我先写在纸上然后拍下来做成图片放上来算辣quq 好的那我先滚去做题了做完这题就把题解放上来.因为 ...

  5. 【Python基础】json.dumps()和json.loads()、json.dump()和json.load()的区分

    json文件处理涉及的四个函数json.dumps()和json.loads().json.dump()和json.load()的区分 一.概念理解 1.json.dumps()和json.loads ...

  6. tomcat安装apr优化

    APR是apache的一个linux操作系统级优化库,可以在tomcat中使用操作系统级native调用大大提高并发处理效率 先安装前置依赖: yum install -y apr-devel ope ...

  7. WCF访问超时：HTTP 请求已超过xx:yy分配的超时。为此操作分配的时间可能是较长超时的一部分。

    在服务端设置时间长些 <client> <endpoint address="http://43.98.49.189:5700/UPJWCFServcie.svc" ...

  8. 使用python实现日志功能

    Python脚本日志系统   Python通过logging模块提供日志功能,关于logging模块的使用网络上已经有很多详细的资料,这里要分享的是怎样在实际工程中使用日志功能. 假设要开发一个自动化 ...

  9. pip批量安装和卸载package

    创建文件 将要安装或卸载的包按指定格式保存到文件中,这里以 packages.txt 为例,格式如下: Flask_Script==2.0.6 alembic==1.0.5 SQLAlchemy==1 ...

  10. tomcat调试之固定步骤自动化

    前端开发,使用tomcat调试,大致需要进行如下几个步骤.其中,第一步,进入项目所在目录敲sbt命令来打包,第二步,拷贝lib文件夹,第四步重启tomcat,反反复复已经让我不胜其烦,那么做个简单的b ...