01-JS特效-三大系列之offset系列
来源:互联网 发布:淘宝类目选择 编辑:程序博客网 时间:2024/06/04 00:32
三大系列
offset-位移
scroll-卷页
client-可视区
js中有一套方便的获取元素尺寸的办法:offset系列
offset常用属性(5个)
offsetWidth和offsetHeight————(检测盒子自身宽高+padding+border)
offsetLeft和offsetTop————(检测距离父盒子有定位的左/上面的距离)
offsetParent————(检测父系盒子中带有定位的父盒子节点)
offsetwidth和offsetheight
offset宽/高 = 盒子自身的宽/高 + padding +border;
offsetWidth = width+padding+border;
offsetHeight = Height+padding+border;
offsetLeft和offsetTop
offsetLeft:
返回距离上级盒子(带有定位)左边的位置
如果父级都没有定位则以body为准
(从父级的padding开始算,父级的border不算)
offsetTop和style.top的区别
最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。 而 style.top不可以
offsetTop返回的是数字(值是四舍五入取整),style.top返回的是字符串(除了数字外还带有单位px)
offsetTop只读,而style.top可读写
style.top只能获取行内式样式。如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。
offsetParent
返回该对象的父级
如果当前元素的父级元素没有进行CSS定位(position为absolute或relative,fixed),offsetParent为body。
如果当前元素的父级元素中有CSS定位,offsetParent取最近的那个父级元素
0 0
- 01-JS特效-三大系列之offset系列
- 01-JS特效-三大系列之offset系列
- 03-JS特效-三大系列之scroll系列
- 08-JS特效-三大系列之client系列
- JavaScript 特效三大系列总结
- 工作流产品三大系列
- android特效集锦系列之三 仿微信摇一摇
- JavaScript 特效之四大家族(offset/scroll/client/event)
- javascript三大家族之offset
- JS特效之倒计时
- JS offset
- Redis数据类型之散列类型--Redis系列三
- 原生js中获取offset系列值 和 jquery中获取 offset()的区别
- 详解JS位置、宽高属性之一:offset系列
- 详解JS位置、宽高属性之一:offset系列
- 详解JS位置、宽高属性之一:offset系列
- js 三大家族(offset/scroll/client)
- js 三大家族(offset/scroll/client)
- K-means算法详解
- volley用法分析和源码分析之一
- java核心技术卷一学习 2016.11.27/2
- 欢迎使用CSDN-markdown编辑器
- windows10,redhat6.5下python3.5.2使用cx_Oracle链接oracle
- 01-JS特效-三大系列之offset系列
- Codeforces Round #386 (Div. 2) F
- 如何设置tomcat虚拟主机
- 使用pycharm远程调试openstack
- HOJ 1797 Red and Black
- 彻底搞定C语言指针详解-完整版-时候初学者-必备
- ThreadLocal使用
- Window下配置C++编译环境、makefile、简略make-clean制作--Sublime Text 3
- 学期总结