js相关笔记

js相关笔记

1.给元素添加非静态定位的定位属性时，你如果不设置它的left和top或者bottom再或者right属性时，他就装作以标准文档流的方式找个位置待着，但是它的确不占空间，很像是左浮动，也许非静态定位不设置left、top、right、bottom属性时就等于float:left;，定位的时候left、top、right、bottom属性不会计算非静态定位的父容器的边框，而是从父容器去除边框之后才正式开始计算的，但是自己如果是有边框的话，会以自己边框最外层作为left、top、right、bottom的起始点也就是（0，0）点，会以这个点与父容器去除边框后的（0，0）点重合，只再根据left、top、right、bottom来确定位置。

2.offsetWidth和offsetHeight表示盒子真实的宽度高度，这个真实的宽度包括 四周的边框、四周的padding、及定义的宽度高度或内容撑开的高度和宽度，可以用来检测盒子实际的大小，属性也是只读不可写的，返回的是不带单位的数值，返回值为number类型。

3.offsetLeft和offsetTop表示当前盒子在定位后距离定位了的父容器的左偏移与上偏移，该属性是只读的不能写，如果父容器没有定位属性（主要是非静态定位），那么就以距离自己最近的父系的非静态定位的盒子为基准，其实和样式中的非静态定位一样的，实在找不到就以浏览器的起始点为基准，所以也许浏览器的起始点是用了非静态定位的，offsetLeft和offsetTop如果在当前盒子没有定位时，那么就默认一浏览器的起始点为基准了，返回的是不带单位的数值，返回值为number类型。。

4.offsetParent表示当前盒子距离最近的父系非静态的定位盒子元素，offsetParent返回的是一个元素节点，如果父系盒子中都没有非静态定位，那么就默认返回body节点了。

5.offsetLeft和style.left的区别
◆offsetLeft只读，style.left可读可写。
◆在没有设置行内样式定位等属性时，style.left能获取到的只是空字符串，而offsetLeft能够获取真实的偏移值。
◆在设置了行内样式定位等属性时，style.left获取到的只是带有单位的字符串如果200px，而offsetLeft获取还是真实的偏移值如200，offsetLeft获取到的是number类型的数字。
◆offsetLeft在当前盒子不处于定位的状态下也能够针对浏览器的起始点来确定偏移值，而style.left在那个时候只能够获取空字符串。
★相同点，在定位的时候二者一样的，都不会去计算非静态定位的父容器的边框，无论边框多大，都是从padding开始算起的，那个时候style.left去掉单位转换为数字就等于offsetLeft了。

6.其实使用offset家族的属性配合style对象，可以制作一个赛马的小游戏，offset.left和style.left。

7. 谷歌浏览器的小bug，就是当你给页面元素定位为0时，你会发现，如果让style.left增加，第二次的时候，你会发现offsetLeft会比style.left多1，这个bug会导致动画比你预期的要难，就是根本停不下来。

8.在使用定时器的时候，最好让每一个定时器的编号都独立起来，这样就不容易出现关闭定时器时把别的定时器给关掉了，如给被一个元素弄一个timer属性，当给这个元素设置定时器时就能够让这个元素独享一个定时器了，不会把其它定时器给关掉，定时器的编号timer不要是全局的，否则就会出现关闭定时器时把最后一个定时器关闭，而其他定时器无法关闭。

9.轮播的本质就是来回移动图片的位置，无缝轮播其实是多加了一张图片在最后面，当你切换到最后一张图片时，最后一张图片再往后切换时，实际上会瞬间切换到第一张然后再继续切换匀速切换到第二张，因为最后一张和第一张一模一样，所以瞬间切换的过程根本看不出来，所以就像很完整的无缝轮播了。