<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. jpa持久化对象四种状态

    自己理解,不完全正确,大致如下: 例:某实体类   Person(int id,string name,int age);   id 为主键. 新建:new Person(),  并且未给 id 赋值 ...

  2. 《HTTP - http首部信息》

    推荐一首歌 - 僕が死のうと思ったのは (曾经我也想过一了百了) 也就听了几十遍而已 经历一番波折,终于正式到了北京. 刚开始是很艰难的,多走两步就好了,不是么. 1:首部字段 Cache-Contr ...

  3. WPF 参数在Page见传递

    void goButton_Click(object sender, RoutedEventArgs e) { this.NavigationService.Navigate(new ContentP ...

  4. JavaScript 数组（Array）对象

    1.Array相关的属性和方法 Array对象属性 constructor 返回对创建此对象的数组函数的引用: length 设置或返回数组中元素的数目: prototype 使您有能力向对象添加属性 ...

  5. django基础-02：虚拟环境

    4. 虚拟环境 4.1 概念 之前安装python包的命令: sudo pip3 install 包名 包的安装路径:/usr/local/lib/python3.5/dist-packages 在同 ...

  6. centos安装Django之一:安装openssl

    这几天在部署Django,需要安装的东西有点多,python3.pip3.openssl(pip依赖ssl环境),所以第一步是安装openssl,如何安装呢?主要有三步,随ytkah一起来看看吧 1. ...

  7. mysql mpm

    mysql mpm 参考文章 http://www.myexception.cn/mysql/1968274.html http://www.linuxidc.com/Linux/2013-07/86 ...

  8. Python日期与字符串互转

    import datetime #str -> date detester = '2017-01-01' date = datetime.datetime.strptime(detester,' ...

  9. 报错解决——DateTimeField *** received a naive datetime (***) while time zone support is active

    这是一个跟时区有关的问题,报错中说到datetime字段得到一个naive datetime,而不是支持time zone的active datetime由于Django的设置中米哦人USE_TZ设置 ...

  10. Python3学习之路~3.3 内置函数

    Python内置函数表: 内置参数详解:https://docs.python.org/3/library/functions.html?highlight=built#ascii 用法: #Auth ...