每个假期都过得如此快10月一是2017年最后一个假期。不由感叹时间过得真快。我已上个月离职,一直在家休整,今天得空吧前几天学习的知识真理一下。
今天主要整理关于,offset系列的,动画是咱们全都工作中,不可缺少的部分
offset
offset:偏移,检测 (里面的属性可以更好的获取元素尺寸) 从左到右动画
offsetLest 取值会遇到四舍五入(取值不精准)
只有定位的盒子才可以移动
1、offsetHeight offsetWidth 可以检测盒子的宽高
a)返回数值么有单位
b)属于numde型
c)offsetHeight=高 + 内边距 + 边框 (不包括外边距)
d)offsetWidth=宽 + 内边距 + 边框 (不包括外边距)
var box=document.getElementsByTagName("div")[0]; console.log(box.offsetHeight); console.log(box.offsetWidth); 240
2、offsetLeft offsetTop 检测距离 父盒子 (父盒子必须有定位)左/上面的距离
a)盒子 到 父盒子( 父盒子有定位 包含盒子的内边距 。 不包含外边距,边框。)左边、上边的位置。
b)如果父盒子没有定位则以body为准,该盒子与文档顶端的距离
var box1=document.getElementsByClassName("box")[0]; console.log(box1.offsetLeft); console.log(box1.offsetTop);
3、offsetLeft 和 .style.left的区别
a ).style.left带有px,是字符串
offsetLeft不带px,是数值
b)offsetLeft可返回没有定位的盒子边距,没定位返回距离body的距离
c)offsetLeft可读,.style.top可读写
d)offsetLeft 是获取值 style.left赋值
4、offsetParent 返回选定元素最近的带有定位的父盒子元素
a)父盒子中都没有定位,返回body
b)如果有,谁有返回最近那个
<div class="word" style="position:relative;"> <div> <div class="box"></div> </div> </div> <script> var box=document.getElementsByClassName("box")[0]; console.log(box.offsetParent) </script>