scrollWidth,clientWidth与offsetWidth的区别

时间:2024-04-22 22:28:38 

scrollWidth 
是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。
clientWidth 
是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。 
offsetWidth 
是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。 

一个scrollWidth和clientWidth的例子: 
<html> 
<head> 
<title>77.htm文件</title> 
</head> 
<body> 
<textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea> 
</body> 
</html> 
在文本框内输入内容,当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。当一行内容超出文本框的宽度,就有横向滚动条出来了,scrollWidth的值就变了。 
scrollWidth是对象实际内容的宽度。 
clientWidth是对象看到的宽度(不含边线),这个例子里不会改变。 

一个clientWidth和offsetWidth的例子: 
<html> 
<head> 
<title>77.htm文件</title> 
</head> 
<body> 
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea> 
</body> 
</html> 
offsetWidth的值总是比clientWidth的值大。 
clientWidth是对象看到的宽度(不含边线) 
offsetWidth是对象看到的宽度(含边线,如滚动条的占用的宽) 

标签:scrollWidth,clientWidth与offsetWidth的区别
0
投稿

猜你喜欢

  • python使用Pycharm创建一个Django项目

    2023-11-01 22:33:13
  • 详解在python操作数据库中游标的使用方法

    2024-01-27 10:51:41
  • MySQL 缓存 Query Cache

    2010-03-13 17:06:00
  • golang gorm实现get请求查询案例测试

    2024-05-09 10:09:31
  • 解决bootstrap导航栏navbar在IE8上存在缺陷的方法

    2023-09-03 10:55:07
  • windows下python安装pip图文教程

    2023-11-18 19:27:20
  • asp get和post数据接收过滤

    2011-04-06 10:52:00
  • 基于Tensorflow一维卷积用法详解

    2022-12-31 20:04:18
  • 修改mysql默认字符集的两种方法详细解析

    2024-01-27 01:48:17
  • Go系列教程之反射的用法

    2024-04-25 15:25:32
  • 搞定MySQL数据库中文模糊检索问题

    2007-09-17 12:36:00
  • 被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用

    2024-05-11 09:33:27
  • Python判断字符串与大小写转换

    2021-07-17 03:23:35
  • python实现自动打卡的示例代码

    2022-11-29 15:01:57
  • 一篇文章带你学习python的函数与类

    2023-10-15 05:04:18
  • 浅谈python内置函数callable的用法

    2023-01-28 11:12:42
  • MySQL数据库优化经验详谈

    2009-12-15 10:34:00
  • Python的SimpleHTTPServer模块用处及使用方法简介

    2023-05-11 06:04:51
  • 解决pytorch trainloader遇到的多进程问题

    2023-02-22 13:46:59
  • golang中net的tcp服务使用

    2023-08-30 10:54:14
  • asp之家 网络编程 m.aspxhome.com