每天10个前端知识点:各种宽高距离篇
来源:互联网 发布:淘宝名鞋库 编辑:程序博客网 时间:2024/05/16 07:49
个人博客已上线,欢迎前去访问评论!
无媛无故 - wangchloe的个人博客
以下内容若有问题烦请即时告知我予以修改,以免误导更多人。
1. 滚动距离
html简写:document.documentElement
- document.body.scrollTop
兼容:Chrome
其他 -> 0 - document.documentElement.scrollTop
兼容:IE、FF
其他 -> 0
兼容写法
纵向:var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
横向:var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
2. 滚动高度
obj.scrollHeight
- 内容高度 > 盒模型高度 取内容高度
- 盒模型高度 > 内容高度 去盒模型高度
3. 可视区高度
- 可视区高度:var clientH = document.documentElement.clientHeight;
- 可视区宽度:var clientW = document.documentElement.clientWidth;
兼容:全兼容
4. 物体高度
获取的是盒模型大小 = width/height + padding + border;
- 物体的高度:var oH = obj.offsetHeight;
- 物体的宽度:var oW = obj.offsetWidth;
注意:offsetWidth/height只有append进body后才有,创建时获取不到盒模型的大小。
5. offsetHeight && getStyle()
6. 物体的相对距离
- 物体距离定位父级左边距离:var oL = obj.offsetLeft;
- 物体距离定位父级上边距离:var oT = obj.offsetTop;
7. 关于父级
- 结构父级 obj.parentNode 根:document
- 定位父级 obj.offsetParent 根:body
8. 封装一个物体距离左边/上边的绝对位置的函数
<script> function getPos(obj) { var l = 0; // 距离左边的绝对距离 var t = 0; // 距离上边的绝对距离 while(obj) { l += obj.offsetLeft; t += obj.offsetTop; obj = obj.offsetParent; // 继续查找上一层定位父级 } return {left: l, top: t}; }</script>
更多内容可以订阅本人微信公众号,一起开启前端小白进阶的世界!
0 0
- 每天10个前端知识点:各种宽高距离篇
- 每天10个前端知识点:事件篇
- 每天10个前端知识点:原生篇(1)
- 每天10个前端知识点:原生篇(2)
- 每天10个前端知识点:原生篇(3)
- 每天10个前端知识点:原生篇(4)
- 每天10个前端知识点:原生篇(5)
- 每天10个前端知识点:js组成篇
- 每天10个前端知识点:数组应用
- 【Web前端】各种宽高的作用
- 前端中的各种小知识点
- 100个前端小知识点
- 前端开发必会的10个知识点
- 前端开发必备25个知识点
- 各种距离
- 各种距离
- 各种距离
- 各种距离
- 简单Demo让你分分钟理解Android中的文件存储
- Luogu P1102 A-B数对+map
- Manipulator explore
- 【剑指offer】面试题39-二叉树的深度
- 【OpenJudge】寻找山顶
- 每天10个前端知识点:各种宽高距离篇
- python3.6 mysql-connector-python 2.2.2
- SCUT ACM PLACTICE # 3 二进制枚举,深搜,广搜
- 理解本真的REST架构风格
- f7-Vue 控件2 表头标题 Badge数字 Block Block inner Block inset
- SpringBatch 数据库 Schema
- android 常用调用系统功能
- POJ 3278-Catch That Cow(BFS-一维广搜)
- CSS格式化排版