<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. LeetCode 917 Reverse Only Letters 解题报告

    题目要求 Given a string S, return the "reversed" string where all characters that are not a le ...

  2. scala语法

    1:双重for循环(相当于j是i的内存循环):for (i <-0 to n; j <-10 to 20){ println(i);println(j)} 2:单层for循环:for (i ...

  3. java JDBC (五) properties配置文件

    1.在src目录下创建文件 database.properties driver = com.mysql.jdbc.Driver url = jdbc:mysql://192.168.0.207:33 ...

  4. 实现用 jquery 禁用浏览器的前进后退按钮

  5. ios多播委托

    在现实中回调的需求也分两种 一对一的回调. 一对多的回调. 对于一对一的回调,在IOS中使用delegate.block都能实现.而一对多的回调基本就是通知中心了. 假如现在有一个需求,我们以图片下载 ...

  6. redis缓存和mysql数据库同步

    附redis关于缓存雪崩和缓存穿透,热点key 穿透 穿透:频繁查询一个不存在的数据,由于缓存不命中,每次都要查询持久层.从而失去缓存的意义. 解决办法: 持久层查询不到就缓存空结果,查询时先判断缓存 ...

  7. 20170712 SQL Server 日志文件收索

    -- 1 日志文件增长过快,未进行任务计划截断备份 造成文件过大199G 左右,而可用空间不足8% -- 2 日志备份之前,需要一次完整备份 再进行截断备份 出现可用空间99% 此时可以选择收索数据库 ...

  8. what' the python之递归函数、二分算法与汉诺塔游戏

    what's the 递归? 递归函数的定义:在函数里可以再调用函数,如果这个调用的函数是函数本身,那么就形成了一个递归函数. 递归的最大深度为997,这个是程序强制定义的,997完全可以满足一般情况 ...

  9. Android使得Fragment 切换时不重新实例化

    以前实现Fragment的切换都是用replace方法实现 public void startFragmentAdd(Fragment fragment) { FragmentManager frag ...

  10. 【Java】-NO.17.EBook.4.Java.1.014-【疯狂Java讲义第3版 李刚】- Annotation

    1.0.0 Summary Tittle:[Java]-NO.17.EBook.4.Java.1.014-[疯狂Java讲义第3版 李刚]-  Annotation Style:EBook Serie ...