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

  1. DOM盒模型和位置 client offset scroll 和滚动的关系

    DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...

  2. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  3. js三大家族offset,scroll,cliennt的区别

    offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,pa ...

  4. 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.名词 ...

  5. JS中client/offset/scroll等的宽高解析

    原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...

  6. client , offset , scroll 系列 及百度导航栏案例

    1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  7. client,offset,scroll系列

    client(客户端),offset(偏移),scroll(滚动)1.client系列 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部 ...

  8. JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度

    Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...

  9. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

随机推荐

  1. oracle 11g手工建数据库过程

    创建需求和目的 1.需要把11机器上的oracle库中的表导入到12机器oracle库 2.11机器上的数据库fp在12机器上不存在,需要创建新库,以便导入.3.我们只需导入业务库shp即可,不需要把 ...

  2. oracle三个重要参数文件:pfile和spfile和init.ora

    Oracle中的参数文件是一个包含一系列参数以及参数对应值的操作系统文件.它们是在数据库实例启动第一个阶段时候加载的, 决定了数据库的物理 结构.内存.数据库的限制及系统大量的默认值.数据库的各种物理 ...

  3. thymeleaf模板使用

    使用模板页面,实现在同一个页面展现不同数据,controller实现页面跳转的时候就不在需要打开新页面

  4. python代码统计核酸检测结果截图

    #QQ:502440275@qq.com#本截图适合安康码截图,如需其他地区截图统计,可与我QQ或QQ邮箱联系#1.在当前文件夹下创建imgs文件夹用于存放图片,图片格式.jpg#2.在当前文件夹下创 ...

  5. 攻防世界-MISC:SimpleRAR

    这是攻防世界新手练习区的第十题,题目如下: 点击下载附件1,是一个RAR文件,解压一下,得到flag.txt文件,激动的点进去看一下 好吧,就知道没有这么简单,用010editor打开这个RAR文件, ...

  6. XCTF练习题---WEB---Training-WWW-Robots

    XCTF练习题---WEB---Training-WWW-Robots flag:cyberpeace{e37180e3f5ad17b4ac71a131e2de1fcb} 解题步骤: 1.观察题目,打 ...

  7. Spring 源码(7)Spring的注解是如何解析的?

    上一篇 https://www.cnblogs.com/redwinter/p/16196359.html 介绍了BeanFactoryPostProcessor的执行过程,这篇文章介绍Spring中 ...

  8. Java汽车租赁系统[源码+数据库]

    系统名称 Java汽车租赁系统   (源码在文末) 系统概要 汽车租赁系统总共分为两个大的模块,分别是系统模块和业务模块.其中系统模块和业务模块底下又有其子模块. 功能模块 一.业务模块 1.客户管理 ...

  9. Linux-文件查找-打包压缩-tar

    1.文件查找工具locate,find 1.1  locate locate 查询系统上预建的文件索引数据库 /var/lib/mlocate/mlocate.db 索引的构建是在系统较为空闲时自动进 ...

  10. 实践GoF的23种设计模式:建造者模式

    摘要:针对这种对象成员较多,创建对象逻辑较为繁琐的场景,非常适合使用建造者模式来进行优化. 本文分享自华为云社区<[Go实现]实践GoF的23种设计模式:建造者模式>,作者: 元闰子. 简 ...