原生js里的offset、client、scroll三大家族
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三大家族的更多相关文章
- js 元素offset,client , scroll 三大系列总结
1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- js中 offset /client /scroll总结
offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...
- offset client scroll
offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...
- bom中的offset,client,scroll
简单明了
- 抛弃JQ,回归原生js……
之前我写过一篇文章叫做<jq不会被淘汰>--而事实上它真的不会被淘汰,因为即使在mvvm框架盛行的今天,原生js的api越来越友好的今天,jq依然在用户量上是霸主-- 但是今天我们要讨论的 ...
随机推荐
- 原生js实现多个随机大小颜色位置速度小球的碰壁反弹
文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...
- HDU 1864 01背包、
这题题意有点坑阿.感觉特别模糊. 我开始有一点没理解清楚.就是报销的话是整张整张支票报销的.也是我傻逼了 没一点常识 还有一点就是说单张支票总额不超过1000,每张支票中单类总额不超过600,我开始以 ...
- 高级教程: 作出动态决策和 Bi-LSTM CRF 重点
动态 VS 静态深度学习工具集 Pytorch 是一个 动态 神经网络工具包. 另一个动态工具包的例子是 Dynet (我之所以提这个是因为使用 Pytorch 和 Dynet 是十分类似的. 如果你 ...
- H3C NAT Server配置举例
- H3C ACL包过滤的局限性
- 【BZOJ 1004】 [HNOI2008]Cards
[题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1004 [题意] 给你sr+sb+sg张牌,(令n=sr+sb+sg),让你把这n张牌染 ...
- java 文件拷贝
需求:源和目标! 那么我们需要源文件和目标文件! 构建管道的时候就需要两个:输出流和输入流管道! Eg: package july7file; //java7开始的自动关闭资源 import java ...
- linux设备编号的内部表示
在内核中, dev_t 类型(在 <linux/types.h>中定义)用来持有设备编号 -- 主次部分都包 括. 对于 2.6.0 内核, dev_t 是 32 位的量, 12 位用作主 ...
- 【p083】传球游戏
Time Limit: 1 second Memory Limit: 50 MB [问题描述] 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样 ...
- 关于POSTMAN做并发压测
一开始我个人在做测试时用到了POSTMAN,用了两种方式做测试, 第一种: 测试发现这种方式是阻塞排队,我让接口睡两秒,这100次请求间隔就是2秒,是串行执行 于是想到第二种,在一个collectio ...