参考哔哩哔哩pink老师课程
1.元素偏斜量offset系列1.1offset概述
offset翻译过来就是偏斜量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏斜）、大小等。
offset系列常用属性：
offset系列属性作用
element.offsetParent
返回作为该元素带有定位的父级元素假如父级都没有定位则返回body
element.offsetTop
返回元素相对带有定位父元素上方的偏斜，返回的数值不带单位
element.offsetLeft
返回元素带有定位父元素左边框的偏斜，返回的数值不带单位
element.offsetWidth
返回自身包括padding、边框border、内容区的长度width，返回数值不带单位
element.offsetHeight
返回自身包括padding、边框border、内容区的长度width，返回数值不带单位
offsetParent和parentNode的区别：
offsetParent返回的是带有定位的儿子，否则返回body
parentNode返回的是近来一级的儿子（亲爷爷）不管妈妈有没有定位
1.2offset与style区别1.2.1offset1.2.2style
案例：获取键盘在袋子内的座标
案例剖析：
我们在袋子内点击，想要得到键盘距离袋子左右的距离首先得到键盘在页面中的座标（e.pageX，e.pageY）或则（e.offsetX，e.offsetY）其次得到袋子在页面中的距离（box.offsetLeft，box.offsetTop）用键盘距离页面的座标乘以袋子在页面中的距离网页点赞，得到键盘在袋子内的座标假如想要联通一下键盘，就要获取最新的座标，使用键盘联通风波mousemove
方式一：
<div class="box">div>
<script>
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})
script>
方式二：
案例：模态框拖放
弹出框，我们称作为模态框
点击弹出层，会弹出模态框，而且显示白色半透明的遮挡层点击关掉按键，可以关掉模态框，但是同时关掉白色半透明遮挡层键盘放在模态框最前面一行，可以按住滑鼠拖放模态框在页面中联通键盘抬起，可以停止拖动模态框联通
案例剖析：
点击弹出层，模态框和遮挡层都会显示下来display:block;点击关掉按键，模态框和遮挡层都会隐藏上去display:none;在页面中拖放的原理：键盘按下但是联通，然后抬起键盘触发风波是键盘按下mousedown，键盘联通mousemove，键盘抬起mouseup拖放过程：键盘联通过程中，获得最新的值形参给模态框的left和top值，这样模态框可以跟随键盘走了键盘按下触发的风波源是最前面一行，就是id为title键盘的座标乘以键盘在袋子内的座标，才是模态框真正的位置。键盘按下，我们要得到键盘在袋子的座标。键盘联通，就让模态框的座标设置为：键盘座标乘以袋子座标即可，注意联通风波讲到按下风波上面。键盘抬起，就停止拖放，就是可以让键盘联通风波解除
2.元素可视区client系列2.1定义
client翻译过来就是顾客端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性作用
element.clientTop
返回元素上边框的大小
element.clientLeft
返回元素左边框大大小
element.clientWidth
返回自身包括padding、内容区的长度，不含边框，返回数值不带单位
element.clientHeight
返回自身包括padding、内容区的高度，不含边框，返回数值不带单位
2.2案例：天猫flexible.js源码剖析
主要作用：创建一个独立的作用域。
2.2.1立刻执行函数
立刻执行函数是指函数定义好后，不须要调用直接执行。即一引入JS文件，则该函数手动执行。
句型：
立刻执行函数:不须要调用，立刻就能自己执行的函数写法:也可以传递参数进来(function(){})()或则(function(){}())，第二个小括弧可以看做是调用函数立刻执行函数最大的作用就是独立创建了一个作用域，上面所有的变量都是局部变量，不会有命名冲突的情况
2.2.2pageShow风波
下边三种情况就会刷新页面就会触发load风波。
a标签的超链接F5或则刷新按键（强制刷新）前进退后按键
然而傲游中，有个特性，有个“往返缓存”，这个缓存中除了保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了显存里。
所以此时退后按键不能刷新页面。
此时可以使用pageshow风波来触发。这个风波在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load风波触发后触发；按照风波对象中的persisted来判定是否是缓存中的页面触发的pageshow风波（返回true或则false），注意这个风波给window添加。
多个立刻执行函数间要加分号;隔开。
(function flexible(window, document) {
// 获取的html 的根元素
var docEl = document.documentElement
// dpr （device pixel ratio） 物理像素比/设备像素比
var dpr = window.devicePixelRatio || 1
// adjust body font size 设置我们body 的字体大小
function setBodyFontSize() {
// 如果页面中有body 这个元素 就设置body的字体大小
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
} else {
// 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body
// 的字体大小
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10 设置我们html 元素的文字大小
// 把 rem 划分成十等份
function setRemUnit() {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize 当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小，调用上面的函数
window.addEventListener('resize', setRemUnit)
// pageshow 是我们重新加载页面触发的事件
window.addEventListener('pageshow', function(e) {
// e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要重新计算一下rem 的大小
// 照顾各个浏览器
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
3.元素滚动scroll系列3.1元素scroll系列属性
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。
scroll系列属性作用
element.scrollTop
返回被卷起来的两侧距离，（从边框下沿开始估算）返回数值不带单位
element.scrollLeft
返回被卷起来的两侧距离，返回数值不带单位
element.scrollWidth
返回自身实际长度，不含边框，包括padding，返回数值不带单位
element.scrollHeight
返回自身实际高度网页点赞，不含边框，包括padding，返回数值不带单位
3.2页面被卷去的腹部
假如浏览器的高（或宽）度不足以显示整个页面时，会手动出现滚动条。当滚动条向上滚动时，页面里面被隐藏掉的高度，我们就称为页面被卷去的颈部。滚动条在滚动时会触发onscroll风波。
获取页面被卷去的腹部：
3.3案例：仿天猫固定左侧侧边栏
需求：
原本侧边栏是绝对定位当页面滚动到一定位置，侧边栏改为固定定位页面继续滚动，会让返回底部显示下来
案例剖析：
须要用到页面滚动风波scroll由于是页面滚动，所以风波源是document滚动到某个位置，就是判定页面被卷去的下部值。页面被卷去的腹部：可以通过window.pageYOffset获得，若果是被卷去的一侧window.pageXOffset注意，元素被卷去的颈部是element.scrollTop,假如是页面被卷去的颈部则是window.pageYOffset虽然这个值可以通过袋子的offsetTop可以得到，假如小于等于这个值，就可以让袋子固定定位了
3.4页面被卷去的腹部兼容性解决方案
须要注意的是，页面被卷去的腹部，有兼容性问题，因而被卷去的背部一般有如下几种写法：
申明了DTD，使用document.documentElement.scrollTop未申明DTD，使用document.body.scrollTop新方式window.pageYOffset和window.pageXOffset,IE9开始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft ||
document.body.scrollLeft || 0, top: window.pageYOffset ||
document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的时侯getScroll().left
4.三大系列总结4.1对比三大系列大小对比作用
element.offsetWidth
返回自身包括padding、边框、内容区的长度，返回数值不带单位
element.clientWidth
返回自身包括padding、内容区的长度，不含边框，返回数值不带单位
element.scrollWidth
返回自身实际的长度，不含边框，返回数值不带单位
4.2主要用法offset系列常常用于获得元素位置offsetLeft、offsetTopclient常常用于获取元素大小clientWidth、clientHeightscroll常常用于获取滚动距离scrollTop、scrollLeft注意页面滚动的距离通过window.pageYOffset获得5.mouseenter和mouseover的区别
