原生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依然在用户量上是霸主-- 但是今天我们要讨论的 ...
随机推荐
- PHP redis安装扩展
命令: 查看php版本:PHP -v 查看php安装的扩展:PHP -m php扩展开发包(包括phpize,php -config):yum install php-devel which phpi ...
- gSOAP 使用
1. wsdl2h 生成服务定义头文件 wsdl2h -o calc.h http://www.genivia.com/calc.wsdl 2. 从服务定义头文件calc.h生成客户端代码 soapc ...
- H3C PPP基本概念
- laravel post提交数据时显示异常
post提交数据时候显示如下: The page has expired due to inactivity. Please refresh and try again 这是由于在laravel框架中 ...
- el-table翻页序号不从1开始(已解决)
法一:赋值方式(亲测有效) <el-table-column type="index" fixed="left" align="center&q ...
- Jasypt加密SpringBoot配置文件
如果 SpringBoot 的 properties 文件中含有用户名密码等敏感信息,为了安全起见需要对明文密码加密.Jasypt 是用来加密的 jar 包. 1.引入 Jasypt 在 pom.xm ...
- Online Classification
Another challenging trend in Internet evolution is the tremendous growth of the infrastructure in ev ...
- Weblogic/WAS之Full GC监控与计算
在网上看到关于内存回收机制,同大家一起分析探讨.堆内存划分为Eden.Survivor 和 Tenured/Old 空间,如下图所示: Minor GC 会清理年轻代的内存,Major GC 是清理老 ...
- [板子]用线段树解决ST表问题
ST表可以参考:http://blog.csdn.net/whistlena/article/details/52191463 简单说就是区间RMQ最值问题. 对解决这种问题,线段树不用用啥啊. 扔一 ...
- seajs源码学习(一)
今天是2015年12月4日,天气较为阴冷.(习惯性记下日期和天气,总要留些回忆给以后) 学习的最佳捷径是模仿,所以如果想快速提高javascript技术,捷径就是去读大神们的优秀源码.就像我们学说话一 ...