原生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依然在用户量上是霸主-- 但是今天我们要讨论的 ...
随机推荐
- phpstorm 中git 的使用
phpstorm 是一款不可多得的IDE 环境,它既是一款强大的编辑器,还是一款调试器,同时还是一款git 可视化管理工具哟,phpers 值得拥有.今天介绍的是他不为人知的强大功能 —— git. ...
- SSM整合 上传下载之添加商品
上传下载细节: 导入xml配置文件!! Controller中要配置存储路径,调用transferto上传文件 上传图片 要将图片的类设置为 MultipartFile 图片下载: 源码: 页面展示: ...
- BiLSTM-CRF学习笔记(原理和理解) 维特比
BiLSTM-CRF 被提出用于NER或者词性标注,效果比单纯的CRF或者lstm或者bilstm效果都要好. 根据pytorch官方指南(https://pytorch.org/tutorials/ ...
- 2003年NOIP普及组复赛题解
题目涉及算法: 乒乓球:简单字符串模拟: 数字游戏:区间DP: 栈:卡特兰数 麦森数:高精度.快速幂.数学. 乒乓球 题目链接:https://www.luogu.org/problem/P1042 ...
- PHP实现微信小程序人脸识别刷脸登录功能
首先我们先确认我们的百度云人脸库里已经上传了我们的个人信息照片 然后我们在后台写刷脸登陆的接口login我们要把拍照获取的照片存储到服务器 public function login(){ // ...
- set和map容器、
set集合容器:实现了红黑树的平衡二叉检索树的数据结构,插入元素时,它会自动调整二叉树的排列,把元素放到适当的位置,以保证每个子树根节点键值大于左子树所有节点的键值,小于右子树所有节点的键值:另外,还 ...
- 51nod 1380"夹克老爷的逢三抽一"(贪心+set)
传送门 •参考资料 [1]:51Nod-1380-夹克老爷的逢三抽一 •题意 从长度为 n 的数组中抽取 $\frac{n}{3}$ 个不相邻的值使得加和最大(首尾也不能同时取) •题解 贪心选择当前 ...
- Wannafly挑战赛15 C“出队”(约瑟夫环类问题)
传送门 •参考资料 [1]:浅梦无痕 [2]:Esquecer [3]:My CSDN •题意 n 个人围成一圈,1,2 报数,报 1 的离队,求编号为 x 的第几次出队: •对博文[1]的理解 第一 ...
- linux 内核定时器的实现
为了使用它们, 尽管你不会需要知道内核定时器如何实现, 这个实现是有趣的, 并且值得 看一下它们的内部. 定时器的实现被设计来符合下列要求和假设: 定时器管理必须尽可能简化. 设计应当随着激活的定时器 ...
- computed计算属性(二)
一.说明 在computed中,可以定义一些属性,即计算属性. 计算属性本质是方法,只是在使用这些计算属性的时候,把他们的名称直接当作属性来使用,并不会把计算属性当作方法去调用,不需要加小括号()调用 ...