标签：span class tag 绑定 style 位移 内容 box meta
JS动画的主要内容如下：
1、三大家族和一个事件对象：
三大家族：offset/scroll/client。也叫三大系列。
事件对象/event（事件被触动时，鼠标和键盘的状态）（通过属性控制）。
2、动画(闪现/匀速/缓动)
3、冒泡/兼容/封装
今天来讲一下offset，以及与其相关的匀速动画。
offset的中文是：偏移，补偿，位移。
js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括：
offsetWidth
offsetHight
offsetLeft
offsetTop
offsetParent
下面分别介绍。
offsetWidth 和 offsetHight：获取元素的宽高 + padding + border，不包括margin。如下：
offsetWidth = width + padding + border
offsetHeight = Height + padding + border
这两个属性，他们绑定在了所有的节点元素上。获取元素之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
举例如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; padding: 10px; border: 10px solid #000; margin: 100px; background-color: pink; } </style> </head> <body> <div class="box"></div> <script> var div1 = document.getElementsByTagName("div")[0]; console.log(div1.offsetHeight); //打印结果：140（100+20+20） console.log(typeof div1.offsetHeight); //打印结果：number </script> </body> </html>
前端学习(49)~offset相关属性和匀速动画(含轮播图实现)
标签：span class tag 绑定 style 位移 内容 box meta
原文地址：https://www.cnblogs.com/Vincent-yuan/p/12466359.html
