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. Attention is all your need 谷歌的超强特征提取网络——Transformer

    过年放了七天假,每年第一件事就是立一个flag——希望今年除了能够将技术学扎实之外,还希望能够将所学能够用来造福社会,好像flag立得有点大了.没关系,套用一句电影台词为自己开脱一下——人没有梦想,和 ...

  2. 浅谈集合框架二 List、Set常用方法

    最近刚学完集合框架,想把自己的一些学习笔记与想法整理一下,所以本篇博客或许会有一些内容写的不严谨或者不正确,还请大神指出.初学者对于本篇博客只建议作为参考,欢迎留言共同学习. 之前有介绍集合框架的体系 ...

  3. 关于IFRAME的onload事件

    昨天遇到一个关于iframe的问题,比如a页面中嵌入了一个iframe称为a_iframe,如果直接在a_iframe的标签上直接加入属性的设置,onload=’’,这样才onload事件才是起作用的 ...

  4. linux /proc 接口

    无论何时一个硬件中断到达处理器, 一个内部的计数器递增, 提供了一个方法来检查设备 是否如希望地工作. 报告的中断显示在 /proc/interrupts. 下面的快照取自一个双处理 器 Pentiu ...

  5. 2019-8-31-git-上传当前分支

    title author date CreateTime categories git 上传当前分支 lindexi 2019-08-31 16:55:59 +0800 2018-05-08 09:2 ...

  6. 10款Web前端工具

    10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如果下面这些工 ...

  7. git authentication failed for 或 fatal:not a git repository

    第一种解决 (我的是第一种解决) github上更改密码之后,我在本地操作git发现出错,错误代码如上,在网上搜了一圈,没有解决问题,后发现需要进行如下操作: 进入控制面板>用户账号>凭据 ...

  8. Avram Joel Spolsky给计算机系学生的建议

    Avram Joel Spolsky给计算机系的学生给了如下建议:     (1)毕业前练好写作     (2)毕业前学好C语言     (3)毕业前学好微观经济学     (4)不要因为枯燥就不选修 ...

  9. github权限管理

    引用自:https://www.cnblogs.com/zhaoyanjun/p/5882784.html 前言: 在上一篇文章中Android github 快速实现多人协作 (http://www ...

  10. 第二阶段:4.商业需求文档MRD:5.PRD-原型图

    页面原型图!