一、client

属性	值
clientWidth	元素被设置的宽度 + padding左右内间距
clientHeight	元素被设置的高度 + padding上下内间距
clientLeft	左边框的宽度
clientTop	上边框的宽度

二、offset

属性	值
offsetWidth	元素被设置的宽度 + padding左右内间距 + 左右边框的值
offsetHeight	元素被设置的高度 + padding上下内间距 + 上下边框的值
offsetLeft	元素外边距离父级左内边距
offsetTop	元素外边距离父级上内边距
offsetParent	返回这个元素的父级元素

注：1）offsetLeft/offsetTop：参照由父级身上的 position：absolute/fixed，如果父级元素身上没有就逐层向上查找，直到 body；

2）offset 必须和 position 配合使用，往往这个值还必须是 absolute；

3）offset往往和我们做元素的运动有关；

三、scroll

属性	值
scrollWidth/scrollHeight	就是我们设置的宽和高加内边距（内容没有溢出的前提，如果超出了范围就按内容而定）
scrollLeft/scrollTop	滚动条卷走的高度

四、总结

1）client系列不获取边框数值，offset会获取边框的数值；

2）以上两者获取到的数值都受元素被设置的宽高具体数值影响，如果在出现滚动条的情况下想获取元素内所有内容的实际高度，则使用scrollHeight；

3）获取浏览器的body的属性是有兼容的

var  dd=document . body || document . documentElement;

　　获取body的整个文档的高

document . scrollHeight || document . documentElement . scrollHeight;

　　获取屏幕的高（浏览器的可视区）

document . body || document . documentElement . clientHeight

client offset scroll 之间的区别的更多相关文章

DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系概览在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
JS-特效～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr）；、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
js三大家族offset,scroll,cliennt的区别
offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,pa ...
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类： JavaScript HTML+CSS 2015-05-27 16:42 635人阅读评论(0) 收藏
原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词 ...
JS中client/offset/scroll等的宽高解析
原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...
client , offset , scroll 系列及百度导航栏案例
1. client 系列示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
client,offset,scroll系列
client(客户端),offset(偏移),scroll(滚动)1.client系列 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部 ...
JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度
Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...
offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
offset 、 client 和 scroll - PC端网页特效
1.元素偏移量 offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以动态得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...

随机推荐

收藏所用C#技术类面试、笔试题汇总
技术类面试.笔试题汇总注:标明*的问题属于选择性掌握的内容,能掌握更好,没掌握也没关系. 下面的参考解答只是帮助大家理解,不用背,面试题.笔试题千变万化,不要梦想着把题覆盖了,下面的题是供大家查漏补 ...
Cordova4.0 系列 -- 常用命令(2)
一. 创建一个cordova工程 create <directory> [<id> [<name>]] 二. 列出该工程支持哪些平台 platform [ls | ...
ipmotool
ipmitool 命令收集 ipmitool 命令收集 from:http://blog.chinaunix.net/u2/70049/showart_1850139.html IPMI远程管理实验 ...
Redis 命令 - Sets
SADD key member [member ...] Add one or more members to a set 127.0.0.1:6379> SADD foo hello (int ...
java第四周学习
这一周学习的还是面向对象的方法和应用 Java中方法的使用和注意事项如果没有返回值,就不允许通过return关键字返回结果方法中不允许嵌套使用 Return返回值只允许返回一个值,不允许返回多个 ...
IT培训行业揭秘（六）
2017年全国的IT职业培训机构的招生数量相比于去年同期都出现了大规模的下滑,虽然目前大学生毕业之后参加培训班的人数依然没有变化,但是目前中小培训机构像雨后春笋般的纷纷建立,他们纷纷抢占市场,为了招生 ...
[UOJ UNR #2]积劳成疾
来自FallDream的博客,未经允许,请勿转载,谢谢. 传送门区间最大值的题emmmm 想到构建笛卡尔树,这样自然就想到了一种dp f[i][j]表示大小为i的笛卡尔树,根的权值是j的答案. 转移 ...
【新特性】JDK1.6
一.Desktop类和SystemTray类在JDK6中 ,AWT新增加了两个类:Desktop和SystemTray. 前者可以用来打开系统默认浏览器浏览指定的URL,打开系统默认邮件客户端给指定 ...
使用iperf测试网卡吞吐性能
原使用iperf测试网卡吞吐性能 2018年12月17日 12:38:41 lancewoo 阅读数:138 首先配置待测试的两个网卡的网络地址到同一网段,保证ping对方的IP地址时可以通.两 ...
JavaScript高级特性-创建对象的九种方式
1. 对象字面量通过这种方式创建对象极为简单,将属性名用引号括起来,再将属性名和属性值之间以冒号分隔,各属性名值对之后用逗号隔开,最后一个属性不用逗号隔开,所有的属性名值对用大括号括起来,像这样: ...