offset家族 自己的,用于获取元素自身尺寸

offsetWidth 和 offsetHeight 获取元素自身的宽度和高度,包括内容+边框+内边距

offsetLeft 和 offsetTop 距离第一个有定位的父级盒子和左边距和上边距 【父级盒子必须要有定位,如果没有,最终以body为准】

offsetParent 返回当前对象的带有定位的父级盒子,【可能是父亲、也可能是爷爷】,如果没有定位,最终返回body

scroll家族

document.body.scrollWidth 获取网页宽度(能够滚动的内容的宽度)

document.body.scrollHeight 获取网页高度(能够滚动的内容的高度)
document.body.scrollTop 网页被卷上去的高度
document.body.scrollLeft 网页被卷去的左侧距离

ie9及最新浏览器
window.pageXOffset (scrollLeft)
window.pageYOffset (scrollTop)

scrollTo(x,y) 把内容滚动到指定坐标

client家族

document.body.clientWidth 获取网页的宽度
document.body.clientHeigth 获取网页的高度

obj.clientLeft 获取元素左边框的宽度
obj.clientTop 获取元素上边框的宽度
obj.clientWidth 获取元素宽度(不包括边框)
obj.clientHeight 获取元素高度(不包括边框)

原生js里的offset、client、scroll三大家族的更多相关文章

  1. js 元素offset,client , scroll 三大系列总结

    1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...

  2. JS 中的offset、scroll、client总结

    经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...

  3. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  4. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

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

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

  6. js中 offset /client /scroll总结

    offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...

  7. offset client scroll

    offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...

  8. bom中的offset,client,scroll

    简单明了

  9. 抛弃JQ,回归原生js……

    之前我写过一篇文章叫做<jq不会被淘汰>--而事实上它真的不会被淘汰,因为即使在mvvm框架盛行的今天,原生js的api越来越友好的今天,jq依然在用户量上是霸主-- 但是今天我们要讨论的 ...

随机推荐

  1. 【CSS3】loading动画

    HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. 【机器学习】【条件随机场CRF-3】条件随机场的参数化形式详解 + 画出对应的状态路径图 + 给出对应的矩阵表示

    1.条件随机场概念CRF,Conditional Random Field,是给定一组输入随机变量条件下另一组输出随机变量的条件概率分布模式,其特点是假设输出随机变量构成马尔可夫随机场. 条件随机场用 ...

  3. 洛谷P2672 推销员 题解 贪心

    题目链接:https://www.luogu.org/problem/P2672 这道题目是贪心,贪心的思想是: 选择 \(m\) 户人家的最大疲劳值应该是以下两种方案中的较大值: 方案一:选择 \( ...

  4. [转]1.2 java web的发展历史

    前言 了解java web的发展历史和相关技术的演进历程,非常有助于加深对java web技术的理解和认识. 阅读目录 1.Servlet的出现 2.Jsp的出现 3.倡导了MVC思想的Servlet ...

  5. Postman:非专业的并发测试

    Postman是开发中常用的接口测试工具,也可以用来进行并发测试. 使用方法如下: 1. 直接输入url 选择GET方法,点击Send. 结果打印一个"test",如下: 2. 使 ...

  6. vue-learning:20 - js - 区别:filters / data / computed / watch / methods

    区别:filters / data / computed / watch / methods 在配置对象options中,filters/data/computed/watch/methods的每一项 ...

  7. logisim自动生成电路

    之前再做有关logisim有关的实验时,一直在傻乎乎地连线,而我是看了mooc有关的视频时,才知道logisim有自动连线的功能. 自动连线需要事先知道输入与输出的真值表或者全部的表达式,将其填入lo ...

  8. C# 实现多线程

    1.System.Threading命名空间 System.Threading命名空间提供了使得可以多线程编程的类和接口   其中 (1)Thread类构成了C#多线程编程的支柱,他用于创建并控制线程 ...

  9. WCF 服务应用程序

    1. 创建 WCF 服务程序和客户端程序,参考如下: https://docs.microsoft.com/zh-cn/dotnet/framework/wcf/getting-started-tut ...

  10. video实现有声音自动播放

    video实现自动播放有声音 需求:老板见人家可以的,我们的也要可以!!! 前端:自动播放,简单... 要实现:鼠标移入视频播放同时有声音,移出让你暂停,,,,, 问题集合 1- 自动播放实现没有声音 ...