• offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
  • clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条
  • scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

参考链接：https://msdn.microsoft.com/library/hh781509(v=vs.85).aspx

offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别的更多相关文章

  1. JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

    /*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...

  2. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  3. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

    这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...

  5. offsetHeight, clientHeight与scrollHeight的区别

      在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...

  6. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

  7. js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。（转）

    js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...

  8. javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX

    原文:https://www.cnblogs.com/ifworld/p/7605954.html 元素宽高 offsetWidth //返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) o ...

  9. javascript - 所有的视图属性和方法（offsetHeight、clientHeight、scrollHeight、innerHeight等）

    注意:本文只简单的介绍了各个视图的属性和方法.如果想要知道兼容性或者更多,请至文章底部参考链接处. 本文内容分为五大部分: Window视图属性 innerHeight 和 innerWidth ou ...

随机推荐

  1. Unity外包团队：U3D与UE我选哪个好？请别再问这种问题了！

    原本预先决定的两家VR游戏公司采访,思熊和星为棋,并没有发现什么共性之初.结果在采访之后却意外发现,两家的经历有着非常相似的地方.他们都是来自于开发游戏所用的引擎的原开发商,比如思熊的主力来自Epic ...

  2. C# .NET MODEL 复制，实体类复制

    -- /// <summary> /// 将T1 实体的参数复制给 T2 ,不能处理多层次 /// </summary> /// <typeparam name=&quo ...

  3. ORACLE数据库自动备份压缩的批处理脚本 rar 7z

    使用7z的版本: @echo offset filename="d:\backup\dbname_%date:~0,10%"set zipfile="d:\backup\ ...

  4. Virtualbox扩展硬盘

    动态调整 1.VBoxManage showhdinfo win10.vdi 2.VBoxManage modifyhd win10.vdi --resize 61200 3.磁盘管理器中分配空间并格 ...

  5. 搭建Mock Server

    1.为什么要搭建mock-server? 为了更好的分工合作,让前端能在不依赖后端环境的情况下进行开发,其中一种手段就是为前端开发者提供一个 web 容器,这个本地环境就是 mock-server. ...

  6. Python——Sublime Text3编写Python的一些问题

    1.回车键不能结束input()函数,如何解决? https://www.cnblogs.com/pcat/p/5499964.html  安装了该插件后,会遇到一些麻烦,这样运行Python程序很不 ...

  7. Python读取文件内容与存储

    Python读取与存储文件内容 一..csv文件 读取: import pandas as pd souce_data = pd.read_csv(File_Path) 其中File_path是文件的 ...

  8. mysql5.7基于gtid主从重做

    master上备份mysql/data/Percona-5721/scripts/xtra_sohmysql_fullbak.sh scp 备份文件到备机 关闭slave service mysql ...

  9. spring框架篇（一）-------spring简介与配置文件使用控制反转事例

    spring简介 Spring 是一个开源框架,中文意思就是春天,也许是作者想让自己的这个框架给Java开发人员带来春天吧.其官方网站是 https://spring.io/ ,可以在官方网站下载到完 ...

  10. Python 递归的练习

    递归的练习 递归的了解实例 # 定义一个类(num是需要给出的参数) # 一定要有临界值 # 要有递推的关系 def digui(num): # 打印num print('$'+str(num)) # ...