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的区别的更多相关文章

  1. js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别

    js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...

  2. 【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别

    一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...

  3. Javascript:scrollWidth,clientWidth,offsetWidth的区别（转）

    网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域高:document.body.offsetW ...

  4. 转：scrollWidth,clientWidth,offsetWidth的区别

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...

  5. scrollWidth、clientWidth、offsetWidth、width的区别

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...

  6. scrollWidth,clientWidth,offsetWidth的区别

      通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...

  7. web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别

    通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...

  8. scrollWidth,clientWidth,offsetWidth的区别 ---转载的

    转载自博客:http://www.cnblogs.com/kongxianghai/p/4192032.html 通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容 ...

  9. css3: scrollLeft,scrollWidth,clientWidth,offsetWidth 的区别

    (需要提一下:CSS中的margin属性,与clientWidth.offsetWidth.clientHeight.offsetHeight均无关) offsetwidth:是元素相对父元素的偏移宽 ...

随机推荐

  1. Android 自定义View-android学习之旅（十四）

    自定义View的步骤 当andoid提供的系统组件不满足要求时候,完全可以集成View来派生自定义组件. 首定定义一个继承View的子类,然后重写他一个或几个方法. 重写的方法介绍 构造器:这是定制V ...

  2. Hibernate之持久化状态

    可持久化对象有以下三种状态: 临时状态(Transient):对象在保存进数据库之前为临时状态,这时数据库中没有该对象的信息,如果没有持久化,程序退出后临时状态的对象信息将会丢失.随时可能被垃圾回收器 ...

  3. Linux内核基础

            Linux系统运行的应用程序通过系统调用来与内核通信.应用程序通常调用库函数(比如C库函数)再有库函数通过系统调用界面,让内核带其完成各种不同的任务. 下面这张图显示的就是应用程序,内 ...

  4. Hibernate查询，返回new对象（注意这个新定义的类要有构造函数），使用sql带条件分页查询并且把结果显示到一个对象的集里面的解决方案

     IIndexDao package com.ucap.netcheck.dao; import com.ucap.netcheck.combination.beans.IndexCombinat ...

  5. iOS中 蓝牙2.0详解/ios蓝牙设备详解 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博 整体布局如下:     程序结构如右图: 每日更新关注:http://weibo.com/hanjunqiang  ...

  6. iOS中 MPMoviePlayer 实现视频音频播放 作者:韩俊强

    ios播放视频文件一般使用 MPMoviePlayerViewController 和 MPMoviePlayerController.前者是一个view,后者是个Controller.区别就是 MP ...

  7. 固定宽高的DIV绝对居中示例

    看了一些代码,然后自己试验了一番,分享如下示例: 实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数, ...

  8. SQL2008数据表空间大小查询脚本

    --尽量少用触发器,否则数据库增长很快,特别是关于登陆的数据表字段不要用出发器,一周左右能使得数据库增长1G的空间. --数据库表空间大小查询脚本 IF  EXISTS (SELECT * FROM ...

  9. 9.6、Libgdx之罗盘

    (官网:www.libgdx.cn) 有些Android和iOS设备可能需要检测使用罗盘检测方向. 注意:罗盘当前在iOS设备中不可用,RoboVM暂不支持. 查询当前罗盘当前是否可用: boolea ...

  10. 《java入门第一季》正则表达式小案例

    案例一:当你登陆某个论坛,向发帖子留下自己qq号的时候,可惜你的号码就是留不下,总是输入*,或者其它奇妙的字符串.其实原理就是用了正则表达式替换. /* * 替换功能 * String类的public ...