<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. oracle 监听报错the information provided for this listener is currently in use by other software on this computer

    use another port number: the information provided for this listener is currently in use by other sof ...

  2. LeetCode 784 Letter Case Permutation 解题报告

    题目要求 Given a string S, we can transform every letter individually to be lowercase or uppercase to cr ...

  3. java ipv4校验正则字符串

    String IPV4_REGEX = "\\A(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)(\\.(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)) ...

  4. Python开发【笔记】：列表转字典

    列表转字典 it = [1,2,3,4] print(dict(zip(it, it))) # {1: 1, 2: 2, 3: 3, 4: 4} it = iter(it) print(dict(zi ...

  5. 初识waindows窗体程序错题整理

    解析:A:Items表示集合B:获取或设置 ComboBox 的可编辑部分中选定的文本.C:SelectedIndex是索引D:获取或设置 控件中选定项的模板 解析:本题目考不同窗体之间跳转的方法,使 ...

  6. mysql批量插入数据

    建表 create table `dept`( `id` ) unsigned NOT NULL AUTO_INCREMENT, `deptno` mediumint() unsigned ', `d ...

  7. Mac本如何卸载MySQL

    Mac本如何卸载MySQL 在Mac上卸载MySQL上一件非常麻烦的事,如果没有卸载干净,就会无法安装新的MySQL 怎样才能完全卸载MySQL呢?(包括所有数据库)    执行以下操作: #打开终端 ...

  8. 011-docker-安装-rabbitmq-management:3.7.13

    1.搜索镜像 docker search rabbitmq 2.拉取合适镜像 选择合适tag:https://hub.docker.com/,下载3.7.13 带web管理界面版本 docker pu ...

  9. ppt 调整 页面 白色区域 大小

    1:  点击设计>大小 2:点击确保适合 3:成功

  10. 【LeetCode每天一题】Find First and Last Position of Element in Sorted Array(找到排序数组中指定元素的开始和结束下标)

    Given an array of integers nums sorted in ascending order, find the starting and ending position of ...