<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. nohup 和 &

    &的意思是在后台运行, 什么意思呢?  意思是说, 当你在执行 ./a.out & 的时候, 即使你用ctrl C,  那么a.out照样运行(因为对SIGINT信号免疫). 但是要注 ...

  2. RENAME方法进行分区改造

    1.新建零时表 set time on timing on create table RPTUSER.RPT_TMP_10086BDL_bak ( HANDLEDATE DATE, TEL_CALLI ...

  3. 20165225《Java程序设计》第六周学习总结

    20165225<Java程序设计>第六周学习总结 1.视频与课本中的学习: - 第八章学习总结 String类 String对象(常量,对象) 字符串并置(结果仍是常量) 常用方法 le ...

  4. 如何将第三方jar包上传到Nexus私服

    首先登陆私服服务器         以动力威视私服为例:          自己搭建的私服地址:http://192.168.1.5:8081/nexus/index.html#view-reposi ...

  5. swift 桥接 Bridging 的创建和使用

    swift编程时,大概率会用到OC的文件,这时就要使用swift与oc的桥接文件.桥接文件以  XXXX-Bridging-header.h  这样子的文件名形式为标准,XXXX是你的项目名字. 具体 ...

  6. python面向对象的三大特性

    一.继承 面向对象中的继承就是继承的类直接拥有被继承类的属性而不需要在自己的类体中重新再写一遍,其中被继承的类叫做父类.基类,继承的类叫做派生类.子类.在python3中如果不指定继承哪个类,默认就会 ...

  7. 浅谈KMP算法

    一.介绍 烤馍片KMP算法是用来处理字符串匹配问题的.比如说给你两个字符串A,B,问B是不是A的子串? 比如,eg就是aeggx的子串 一般讲字符串A称为主串,用来匹配的B串称为模式串 定义n为字符串 ...

  8. 【Python】【面试必看】Python笔试题

    前言 现在面试测试岗位,一般会要求熟悉一门语言(python/java),为了考验求职者的基本功,一般会出 2 个笔试题,这些题目一般不难,主要考察基本功.要是给你一台电脑,在编辑器里面边写边调试,没 ...

  9. what's the python之变量、基本数据类型

    what's the 变量? Python 中的变量赋值不需要类型声明. 变量在内存中创建,包括变量的标识,名称和数据. 变量在使用前都必须赋值,变量赋值以后该变量才会被创建. 等号(=)用来给变量赋 ...

  10. ABS PBT POM材质键冒

    键盘手感除了和按键架构相关之外,按键键帽材质及其字迹印技术也会影响键盘手感,从中可看到键帽的重要性不言而喻.像Cherry原厂机械键盘,键帽不管是用料还是字迹印刷技术都让人满意,受到很多玩家追捧.而普 ...