1.offset家族
offset这个单词本身是--偏移，补偿，位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族,offsetWidth、offsetHight 以及offsetLeft、offsetTop、offsetParent共同组成了offset家族。
1. offsetWidth和offsetHeight（检测自身盒子宽高+padding+border）
- offsetWidth = width+padding+border；
- offsetHeight = Height+padding+border；
2. offsetLeft和offsetTop （检测距离父盒子有定位的左/上面的距离）
- 返回距离上级盒子（带有定位）左边的位置
- 如果父级都没有定位则以body为准
- offsetLeft 从父亲的padding 开始算,父亲的border 不算。
- 在父盒子有定位的情况下，offsetLeft == style.left(去掉px)
3. offsetParent （检测父系盒子中带有定位的父盒子节点）
- 返回该对象的父级 （带有定位），如果当前元素的父级元素没有进行CSS定位 （position为absolute或 relative，fixed）， offsetParent为body。
- 如果当前元素的父级元素中有CSS定位（position为absolute或relative，fixed），offsetParent取最近的那个父级元素。
4. offsetLeft和style.left的区别：
- 最大的区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置，而style.left不行
- offsetLeft返回的是number型，而style.left返回的是string型，且带有单位px
- offsetLeft只读，而style.left可读写
- 还有只有写在行内样式的left，才可以被style.left拿到 ，否则返回的就是空字符串。
5.offsetTop和style.top同上
2. Scroll家族组成
1. scrollWidth和scrollHeight( 不包括border 和 margin)
- scrollWidth = 盒子本身width+padding
- 检测盒子的宽高。（调用者：节点元素。属性。）
- 盒子内容的宽高。（如果有内容超出了，显示内容的宽高度,不超过则为盒子本身的宽高度）
- IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
2. scrollTop和scrollLeft
- 网页，被浏览器遮挡的头部和左边部分。
- 被卷去的头部和左边部分。
- 兼容问题：
一、未声明 DTD（谷歌只认识他、IE9+）、document.body.scrollTop
二、已经声明DTD（IE678只认识他、IE9+任何时候）、document.documentElement.scrollTop
三、火狐/谷歌/ie9+以上支持的、window.pageYOffset
说简单点：就是谷歌只识别 document.body, 而IE只识别document.documentElement
火狐才有DTD的声明问题。
兼容写法：
var top = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop;
或 var top = document.body.scrollTop + document.documentElement.scrollTop;
判断页面是否已声明DTD
document.compatMode === 'BackCompat'
BackCompat -- 未声明
CSS1Compat --- 声明
// scroll方法的封装
// 需求: 封装一个兼容的scroll(),返回值是json,用scroll().top获取scrollTop的属性
function scroll() {
// 如果存在,返回0~无穷大
// 不存在返回undefined
// 兼容谷歌、火狐以及IE9+
if (window.pageYOffset !== undefined) {
return {
"top": window.pageYOffset,
"left": window.pageXOffset
};
} else if (document.compatMode === 'CSS1Compat') {
// IE9以下的 还需要判断是否已声明DTD，CSS1Compat标识已声明
return {
"top": document.documentElement.scrollTop,
"left": document.documentElement.scrollLeft
};
} else {
return {
"top": document.body.scrollTop,
"left": document.body.scrollLeft
}
}
// 实际使用的
// return {
// "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
// "left": window.pageYOffset || document.body.scrollLeft || document.documentElement.scrollLeft
// }
}
3. 获取title、body、head、html标签
- document.title --- 文档标题；
- document.head --- 文档的头标签
- document.body --- 文档的body标签；
- document.documentElement --- 这个很重要，它表示文档的html标签， 也就是说，基本结构当中的html标签并不是通过document.html 去访问的，而是document.documentElement
3. client家族
1. clientWidth和clientHeight
- 调用者不同，意义不同：
- 盒子调用： 指盒子本身。
- body/html调用： 可视区域大小。
- clientX： 鼠标距离可视区域左侧距离（event调用）
- clientY： 鼠标距离可视区域上侧距离（event调用）
- clientTop / clientLeft : 盒子的border宽高
兼容写法：
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
2.三大家族的区别：
1. width和height：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度（不包含border）
scrollHeight = 内容高度（不包含border）
2. top和left:
offsetTop/offsetLeft ：
调用者：任意元素。(盒子为主)
作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
调用者：document.body.scrollTop/.....(window)
作用：浏览器无法显示的部分（被卷去的部分）。
clientY/clientX:（clientTop/clientLeft 值的是border）
调用者：event.clientX(event)
作用：鼠标距离浏览器可视区域的距离（左、上）。
3.缓动动画原理
leader = leader + (target - leader) /10;
盒子位置 = 盒子本身位置 + （目标位置 - 盒子本身位置）/10
动画原理: 目标位置 = 盒子位置 + 步长
// 需注意的一点是: JS实际运算时会四舍五入取整,然后计算
// 获取盒子距离左侧具有定位的父盒子的距离（没有的body），四舍五入取整。
// style.left获取的是具体值。
/***
*缓动动画封装
* @param ele
* @param target
* @param type [left || top]
*/
function animate(ele, target, type) {
// 开始动画 首先要清除定时器
clearInterval(ele.timer);
// 开始定时器
ele.timer = setInterval(function () {
// 开闭原则
var CLOSE_INTERVAL = false; // 是否关闭定时器
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for (var k in json) {
// 动画原理: 盒子位置 = 盒子位置 + ((目标位置 - 盒子自身位置)/10)
// 1.获取步长 (目标位置 - 盒子自身位置)/10
var leader = parseInt(getStyle(ele, k)) || 0;
var step = (json[k] - leader) / 10;
// 2. 二次加工, 小于0向下取整 或 大于0向上取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 3.移动 盒子位置 = 盒子位置 + 步长
leader = leader + step;
ele.style[k] = leader + "px";
// 4.清除定时器的条件 当步长 大于 (目标位置 - 盒子自身位置)
// 不考虑小数的情况下,只要目标位置和当前位置不相等，就不能清除清除定时器。
if (Math.abs(json[k] - leader) > Math.abs(step)) {
CLOSE_INTERVAL = true;
}
}
//只有所有的属性都到了指定位置，CLOSE_INTERVAL值才不会变成true；
if (!CLOSE_INTERVAL) {
// 将盒子位置直接赋为 目标位置
// ele.style[type] = target + "px";
clearInterval(ele.timer);
callback && callback();
}
}, 25);
}
// 获取元素样式的兼容写法
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
元素位置及事件
