<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 832 Flipping an Image 解题报告

    题目要求 Given a binary matrix A, we want to flip the image horizontally, then invert it, and return the ...

  2. 《HTTP - 基于http的认证》

    推荐一首歌 - 好吧,今天刚入职第二天,也没听歌. 哈哈哈哈. 1:何为认证? - 其实这个问题就比较宽泛了,总的来说,就是你有证明你身份的标识. - 和人类社会一样,你花了钱想看一场场演唱会,但是谁 ...

  3. appium入门（1）__ appium介绍

    摘自:http://www.testclass.net/appium/appium-base-summary/ 1.特点 appium 是一个自动化测试开源工具,支持 iOS 平台和 Android ...

  4. 获取文件后缀名（zip,rar等）

    var filename = file.name; var index1 = filename.lastIndexOf("."); var index2 = filename.le ...

  5. python摸爬滚打之day010----函数进阶

    1.函数动态传参 *args : 将所有的位置参数打包成一个元组的形式. **kwargs : 将所有的关键字参数打包成一个字典的形式. 形参的接收顺序:    位置参数 > *args > ...

  6. Nand Flash 驱动框架

    框架入口源文件:s3c_nand.c (可根据入口源文件,再按着框架到内核走一遍) 内核版本:linux_2.6.22.6   硬件平台:JZ2440 以下是驱动框架: 以下是驱动代码 s3c_nan ...

  7. NOIP2009靶形数独

    题目描述: 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请教,Z 博士拿出了他最近发明的“ ...

  8. wordpress如何去掉generator

    用wordpress建站经常会出现一些显而易见的标签,比如说作者<meta name="generator" content="WordPress 4.9" ...

  9. android常用函数

    package com.cqytjr.util; import java.io.File; import java.net.InetAddress; import java.net.NetworkIn ...

  10. 自动化工具之二：win32gui

    自动化工具win32gui 一.下载安装win32gui 二.Win32gui的使用 1.查找窗体句柄 我们知道的所有空间其实就是窗体,所有的窗口都有一个独立的句柄,要操作任意一个窗体,你都需要找到这 ...