js相关笔记（十五）
1.offset取值返回时一个number类型的数值，但是它不会返回带小数的整数，内部做了四舍五入的处理，如style.left=9.4px，offsetLeft获取到的值是9，然而style.left=9.5px，offsetLeft获取到的值是10。
2.匀速动画的原理：this.style.left=this.offsetLeft+步长（也就是每次递增多少递减多少），步长的递增和递减取决于 指定的位置是大于当前位置还是小于当前位置。
3.缓速动画的原理：this.style.left=this.offsetLeft+步长，这个步长是动态的，speed=（指定的位置-this.offsetLeft）/10，因为只有这样 速度才会从快慢，但是可能会出现 当步长过小时，this.offsetLeft从this.style.left哪里获取到的值被四舍五入了，然后造成永远达不到指定的位置并且定时器也无法清除，解决的方法时，每次都对步长进行向上或者向下取舍
【
//每次移动的步长
element.spend = (target - element.offsetLeft) / 10
//对步长进行取整，避免offsetLeft底层的四舍五入的影响
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
】，
这样就能够达到，当步长大于0就向上取整，就不担心offsetLeft四舍五入掉0.5以下的值了，如果步长为负数时，也能够做到-0.5直接向下取整变成-1，于是就解决了指定的位置小于当前位置而造成的不移动并且定时器不停的问题，判断当前的位置和指定的位置是否符合停止定时器的核心代码是
【
//目标位置减去当前位置的绝对值 如果小于步长的绝对值 那么就说明也就一步之遥了，
// 那么直接移动到指定的位置清除计时器算了。
if (Math.abs(target - element.offsetLeft) <= Math.abs(element.spend)) {
element.style.left = target + "px";
clearInterval(element.timer);
return;
}
】
,都是判断左右步长是否小于或者等于当前位置距离指定位置的长度，如果符合条件那么可以直接停止计时器了，这一点无论是匀速还是缓速动画都是一样的。
4.滚动事件是onscroll，只要滚动1px就会触发这个事件。
5.scrollWidth表示元素的内容宽度加上padding，不包括border和margin，scrollHeight表示元素的内容高度和padding，当内容小于盒子定义的高度时scrollHeight就是盒子定义的高度加上padding，主要是以元素内容的高度和padding来决定大小的，注意在IE7及以下scrollHeight只有元素的内容的高度和padding来决定大小，就算内容的高度小于盒子定义的高度时scrollHeight也还是盒子内容的高度加上padding。
6.scrollTop表示纵向移动滚动条时上边被卷去的距离，一般是用于body，document.body.scrollTop,但是兼容性不是很好，scrollLeft表示横向移动滚动条时左边被卷去的距离，一般是用于body，document.body,scrollLeft,但是兼容性不是很好。
7.DTD表示文档约束，就是浏览器需要遵循的一些新的规则，浏览器遵守了新的规则之后就可能会出现之前的代码出现兼容性的问题，但是浏览器遵守了新的规则之后，就会出现兼容性更好的代码，如声明了DTD之后document.body.scrollTop在任何浏览器都不能用了包括IE9及以下，因为在新的规则中不允许使用document.body.scrollTop获取滚动时上边被卷去的距离，只能够使用document.documentElement.scrollTop。
8.在html中有声明了DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）时 document.body.scrollTop就没有效果了，在任何浏览器都没有效果，但是在没有声明DTD时，document.body.scrollTop除了IE9及其以下不能用，其它浏览器都可以用，当然也会在一些类似IE9及以下的老版本的浏览器不能用。
9.在html中有声明了DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）时 在任何浏览器使用document.documentElement.scrollLeft 和document.documentElement.scrollTop都会返回具体的值（包括IE9及其以下），但是在没有声明DTD时，只有IE（任何版本）浏览器能够获取到具体的值，其它浏览器的返回值都是0，所以声明了DTD的重要性一览无余。
10.无论有没有声明DTD，在IE9及以上和其它主流浏览器上，都可以使用另一种方式来获取被卷去的距离，也就是window.pageYOffset和window.pageXOffset,这两个一个是获取纵向被卷去的距离和横向被卷去的距离，window.pageYOffset在IE678中返回值是undefined，最好的兼容写法是 ：
window.pageYOffset||document.body.scrollTop ||document.documentElement.scrollTop
。
11.在IE9及其版本之下的或者类似的浏览器，无论有没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记），document.body.scrollTop和document.body.scrollLeft都只会返回0，但是无论有没有声明了DTD（<!DOCTYPE html>或者其它<html>标签之上的标记），document.documentElement.scrollLeft和document.documentElement.scrollTop 在IE任何版本的浏览器上都能够获取具体的值，当然有声明DTD时这两个可以获取到所有浏览器的具体的值，于是兼容性写法是：
◆document.body.scrollLeft ||document.documentElement.scrollLeft
◆document.body.scrollLeft +document.documentElement.scrollLeft
★最好的还是：window.pageYOffset||document.body.scrollTop ||document.documentElement.scrollTop
12.Html基本结构访问方法
◆获取title标签的方式：document.title
◆获取head标签的方式：document.head
◆获取body标签的方式：document.body
◆获取html标签的方式：document.documentElement
12.所以上面的document.body.scrollTop和document.documentElement.scrollTop，其实就是不同浏览器认为是body在滚动还是html在滚动而导致的兼容性问题出现的原因，后来一致决定了window.pageXOffset，不是body在动也不是html在动，是页面在动，但是由于浏览器要向下兼容，所以以前的属性还是在用也在更新。
13.判断是否声明的DTD，BackCompat表示未声明，CSS1Compat表示已经声明，判断的方式是：
◆document.compatMode==="BackCompat"注意大小写。
14.scroll兼容性封装【
function scroll() {
/*
*注意事项：
*1.无论有没有声明DTD 在IE9及以上的所有浏览器都支持window.pageXOffset和window.pageYOffset
* 但是在IE9以下不支持，并且会返回undefined。
*2.在没有声明DTD时 在IE9以上的所有浏览器都支持document.body.scrollLeft和document.body.scrollTop
* 在声明了DTD时 所有浏览器都不支持，并且会返回0
*3.在声明了DTD时 所有浏览器都支持document.documentElement.scrollLeft和document.documentElement.scrollTop
* 无论有没有声明DTD IE浏览器都支持,没有声明DTD 其它除了IE浏览器外都不支持，并且会返回0。
* */
//判断是否不为undefined
if (window.pageXOffset !== "undefined" || window.pageYOffset !== "undefined") {
//返回一个关于scroll的对象回去
return {scollLeft: window.pageXOffset, scollTop: window.pageYOffset};
}
else if (document.compatMode === "BackCompa") {//是否没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）
//判断是否是IE浏览器
if (document.documentElement.scrollLeft || document.documentElement.scrollTop) {
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
else {//如果不是IE浏览器
return {scollLeft: document.body.scrollLeft, scollTop: document.body.scrollTop};
}
}
else {//如果声明了DTD
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
// //精简版封装只需要返回 这个就是上面判断的精简 效果一样
// return {
// scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
// scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
// }
}
】
15.创建新元素比克隆元素要慢。
16.设置大图片为背景时，不要直接是设置图片宽度，设置为100%，然后再设置图片的背景定位为 background-position:top center,这样尽管图片再大，都会是居中显示的，图片的长度等于当前文档的可见宽度，背景定位从图片的中间开始，所以图片就居中了。
2.匀速动画的原理：this.style.left=this.offsetLeft+步长（也就是每次递增多少递减多少），步长的递增和递减取决于 指定的位置是大于当前位置还是小于当前位置。
3.缓速动画的原理：this.style.left=this.offsetLeft+步长，这个步长是动态的，speed=（指定的位置-this.offsetLeft）/10，因为只有这样 速度才会从快慢，但是可能会出现 当步长过小时，this.offsetLeft从this.style.left哪里获取到的值被四舍五入了，然后造成永远达不到指定的位置并且定时器也无法清除，解决的方法时，每次都对步长进行向上或者向下取舍
【
//每次移动的步长
element.spend = (target - element.offsetLeft) / 10
//对步长进行取整，避免offsetLeft底层的四舍五入的影响
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
】，
这样就能够达到，当步长大于0就向上取整，就不担心offsetLeft四舍五入掉0.5以下的值了，如果步长为负数时，也能够做到-0.5直接向下取整变成-1，于是就解决了指定的位置小于当前位置而造成的不移动并且定时器不停的问题，判断当前的位置和指定的位置是否符合停止定时器的核心代码是
【
//目标位置减去当前位置的绝对值 如果小于步长的绝对值 那么就说明也就一步之遥了，
// 那么直接移动到指定的位置清除计时器算了。
if (Math.abs(target - element.offsetLeft) <= Math.abs(element.spend)) {
element.style.left = target + "px";
clearInterval(element.timer);
return;
}
】
,都是判断左右步长是否小于或者等于当前位置距离指定位置的长度，如果符合条件那么可以直接停止计时器了，这一点无论是匀速还是缓速动画都是一样的。
4.滚动事件是onscroll，只要滚动1px就会触发这个事件。
5.scrollWidth表示元素的内容宽度加上padding，不包括border和margin，scrollHeight表示元素的内容高度和padding，当内容小于盒子定义的高度时scrollHeight就是盒子定义的高度加上padding，主要是以元素内容的高度和padding来决定大小的，注意在IE7及以下scrollHeight只有元素的内容的高度和padding来决定大小，就算内容的高度小于盒子定义的高度时scrollHeight也还是盒子内容的高度加上padding。
6.scrollTop表示纵向移动滚动条时上边被卷去的距离，一般是用于body，document.body.scrollTop,但是兼容性不是很好，scrollLeft表示横向移动滚动条时左边被卷去的距离，一般是用于body，document.body,scrollLeft,但是兼容性不是很好。
7.DTD表示文档约束，就是浏览器需要遵循的一些新的规则，浏览器遵守了新的规则之后就可能会出现之前的代码出现兼容性的问题，但是浏览器遵守了新的规则之后，就会出现兼容性更好的代码，如声明了DTD之后document.body.scrollTop在任何浏览器都不能用了包括IE9及以下，因为在新的规则中不允许使用document.body.scrollTop获取滚动时上边被卷去的距离，只能够使用document.documentElement.scrollTop。
8.在html中有声明了DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）时 document.body.scrollTop就没有效果了，在任何浏览器都没有效果，但是在没有声明DTD时，document.body.scrollTop除了IE9及其以下不能用，其它浏览器都可以用，当然也会在一些类似IE9及以下的老版本的浏览器不能用。
9.在html中有声明了DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）时 在任何浏览器使用document.documentElement.scrollLeft 和document.documentElement.scrollTop都会返回具体的值（包括IE9及其以下），但是在没有声明DTD时，只有IE（任何版本）浏览器能够获取到具体的值，其它浏览器的返回值都是0，所以声明了DTD的重要性一览无余。
10.无论有没有声明DTD，在IE9及以上和其它主流浏览器上，都可以使用另一种方式来获取被卷去的距离，也就是window.pageYOffset和window.pageXOffset,这两个一个是获取纵向被卷去的距离和横向被卷去的距离，window.pageYOffset在IE678中返回值是undefined，最好的兼容写法是 ：
window.pageYOffset||document.body.scrollTop ||document.documentElement.scrollTop
。
11.在IE9及其版本之下的或者类似的浏览器，无论有没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记），document.body.scrollTop和document.body.scrollLeft都只会返回0，但是无论有没有声明了DTD（<!DOCTYPE html>或者其它<html>标签之上的标记），document.documentElement.scrollLeft和document.documentElement.scrollTop 在IE任何版本的浏览器上都能够获取具体的值，当然有声明DTD时这两个可以获取到所有浏览器的具体的值，于是兼容性写法是：
◆document.body.scrollLeft ||document.documentElement.scrollLeft
◆document.body.scrollLeft +document.documentElement.scrollLeft
★最好的还是：window.pageYOffset||document.body.scrollTop ||document.documentElement.scrollTop
12.Html基本结构访问方法
◆获取title标签的方式：document.title
◆获取head标签的方式：document.head
◆获取body标签的方式：document.body
◆获取html标签的方式：document.documentElement
12.所以上面的document.body.scrollTop和document.documentElement.scrollTop，其实就是不同浏览器认为是body在滚动还是html在滚动而导致的兼容性问题出现的原因，后来一致决定了window.pageXOffset，不是body在动也不是html在动，是页面在动，但是由于浏览器要向下兼容，所以以前的属性还是在用也在更新。
13.判断是否声明的DTD，BackCompat表示未声明，CSS1Compat表示已经声明，判断的方式是：
◆document.compatMode==="BackCompat"注意大小写。
14.scroll兼容性封装【
function scroll() {
/*
*注意事项：
*1.无论有没有声明DTD 在IE9及以上的所有浏览器都支持window.pageXOffset和window.pageYOffset
* 但是在IE9以下不支持，并且会返回undefined。
*2.在没有声明DTD时 在IE9以上的所有浏览器都支持document.body.scrollLeft和document.body.scrollTop
* 在声明了DTD时 所有浏览器都不支持，并且会返回0
*3.在声明了DTD时 所有浏览器都支持document.documentElement.scrollLeft和document.documentElement.scrollTop
* 无论有没有声明DTD IE浏览器都支持,没有声明DTD 其它除了IE浏览器外都不支持，并且会返回0。
* */
//判断是否不为undefined
if (window.pageXOffset !== "undefined" || window.pageYOffset !== "undefined") {
//返回一个关于scroll的对象回去
return {scollLeft: window.pageXOffset, scollTop: window.pageYOffset};
}
else if (document.compatMode === "BackCompa") {//是否没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）
//判断是否是IE浏览器
if (document.documentElement.scrollLeft || document.documentElement.scrollTop) {
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
else {//如果不是IE浏览器
return {scollLeft: document.body.scrollLeft, scollTop: document.body.scrollTop};
}
}
else {//如果声明了DTD
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
// //精简版封装只需要返回 这个就是上面判断的精简 效果一样
// return {
// scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
// scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
// }
}
】
15.创建新元素比克隆元素要慢。
16.设置大图片为背景时，不要直接是设置图片宽度，设置为100%，然后再设置图片的背景定位为 background-position:top center,这样尽管图片再大，都会是居中显示的，图片的长度等于当前文档的可见宽度，背景定位从图片的中间开始，所以图片就居中了。
