前端的小玩意(13)——获取DOM的位置相关信息
来源:互联网 发布:fmc信仰充值站 淘宝 编辑:程序博客网 时间:2024/06/06 02:05
Github的DEMO地址:
https://github.com/qq20004604/some_demo/tree/master/%E5%85%B3%E4%BA%8Eclient%E3%80%81offset%E3%80%81scroll%E7%9A%84%E8%AE%BE%E7%BD%AE
建议查看这个,阅读效果更好
(35)获取DOM的位置相关信息
引自:
http://www.cnblogs.com/dolphinX/archive/2012/11/19/2777756.html
前缀:
offset、client、scroll
后缀:
Width、Height、Left、Top
说明:
①clientWidth和clientHeight指盒模型内部的宽高,包含padding,不包含border(IE下包括,但可能看版本?)和margin,不包含滚动条;
②clientTop和clientLeft,指border的左边和上面高度;
③offsetLeft和offsetTop指border区域以外,距离页面左边和上面的距离(具体的说,假如窗口实际高度1000px,该元素的margin-top是150px,其父元素的margin-top是2225px,那么,offsetTop的值是2225,注意,2225覆盖了150的区域,所以150没有起效)
④offsetWidth和offsetHeight指包含border区域的盒模型大小(包含滚动条);
⑤scrollWidth和scrollHeight是dom可滚动区域的宽和高(不包含border,包含滚动条);最小值是dom的宽和高(带滚动条);
⑥scrollTop和scrollLeft是dom当前滚动情况下,页面顶部距离实际顶部的高度和宽度。
- 前端的小玩意(13)——获取DOM的位置相关信息
- 前端的小玩意(16)——在IE7的场景下,获取字符串的第n个字符
- 前端的小玩意(6)——使用padding的左定宽、右自适应布局
- 前端的小玩意(7)——自动给每个字下方加着重号
- 前端的小玩意(15)——一步一步仿写三个图标和动画
- 前端的小玩意(16)——利用setter和getter实现数据校验
- 前端的小玩意(2)jQuery的选择器大全
- 前端的小玩意(10)CSS3的:nth选择器
- 前端的小玩意(3)禁止元素被选中
- 前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)
- 前端的小玩意(5)——用dojo写的二级下拉菜单自动添加功能
- 魅力四射的“小玩意”——PicoContainer
- 【前端攻城狮之路】小总结——JS获取DOM的不同方式
- 前端的小玩意(9.3)——做一个仿360工具箱的web页面(我的工具里的模板和样式)
- 前端的小玩意(9.2)——做一个仿360工具箱的web页面(全部工具里面的模板)
- 前端的小玩意(9.5)——做一个仿360工具箱的web页面(完结篇,可以跑起来的工具箱)
- 有趣的小玩意
- 前端的小玩意(8)——旋转的盒子(纯CSS动画效果)+可自由拖动(js)
- MySQL存储过程详解 mysql 存储过程
- [kuangbin带你飞]专题十二 基础DP1 C HDU 1069
- 第八周 计数的模式匹配
- Hibernate 框架简介
- OC和JS交互 JS端代码
- 前端的小玩意(13)——获取DOM的位置相关信息
- telnet 命令:
- Angularjs自定义指令之省市区三级联动
- iOS 真机测试报错
- 剑指offer-算法题练习:part22 包含min函数的栈
- 简单使用Git和Github来管理自己的代码和读书笔记
- 投资股票原则:
- 第八周项目4-字符串加密
- 提升服务效率就这么简单