一、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. 通过uniCloud白捡一个在线图库管理工具,可支持图床外链

    喜欢写文章的技术大佬们,应该都有一个自己的在线图片管理工具吧. 尤其是在写markdown时,为了让我们的文章"图文并茂",显得不那么枯燥,就经常需要在合适的地方插入一些关联性的图 ...

  2. 序列化和反序列化为什么要实现Serializable接口?(史上最全、简单易懂)

    目录结 前言 1.什么是序列化和反序列化 2.什么时候需要进行序列化和反序列化 2.1.服务器和浏览器交互时用到了Serializable接口吗? 2.2.Mybatis将数据持久化到数据库中用到了S ...

  3. Mybatis映射文件动态SQL语句-02

    foreach UserMapper.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYP ...

  4. Java的虚拟线程(协程)特性开启预览阶段,多线程开发的难度将大大降低

    高并发.多线程一直是Java编程中的难点,也是面试题中的要点.Java开发者也一直在尝试使用多线程来解决应用服务器的并发问题.但是多线程并不容易,为此一个新的技术出现了,这就是虚拟线程. 传统多线程的 ...

  5. 微信小程序--设置和获取剪切板内容

    设置 wx.setClipboardData  // 复制功能 获取 wx.getClipboardData // 粘贴功能     let _this = this     wx.setClipbo ...

  6. JavaScript学习④

    * BOM 1. 事件 ## DOM简单学习:为了满足案例要求 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element * document.getElementById(&q ...

  7. Java语言学习day21--7月27日

    ###01接口的概念 * A:接口的概念 接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的"类". 接口只描述所应该具备的方法,并没有具体实现,具体的实现由接口的实 ...

  8. Unity减小安装包的体积(210MB减小到7MB)

    概述 项目简介 由于是公司内做的项目,不方便开源,就只分享优化过程吧. 项目信息 逐日是一个移动端单机小游戏,使用Unity开发,目前已将项目使用的Unity升级到2019.4.14f1c1 (3e5 ...

  9. 利用java反射机制实现List>转化为List

    BEGIN; 最近在用hibernate做项目,由于后续的业务功能比较多,然后框架原设计没有使用到一对多.一对一等特性,(艹TA妹)没办法,只能用原生sql语句获得需要的结果集.但是返回过来的是一个L ...

  10. 5. VIM编辑器

    Vim编辑器中设置了3种模式-命令模式.末行模式和编辑模式 命令模式:控制光标移动,可对文本进行复制.粘贴.删除和查找等工作. 输入模式:正常的文本录入. 末行模式:保存或退出文档,以及设置编辑环境. ...