本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1. 元素偏移量 offset 系列

1.1 offset 概述

offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。  获得元素距离带有定位父元素的位置  获得元素自身的大小（宽度高度）  注意： 返回的数值都不带单位 offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。  获得元素距离带有定位父元素的位置  获得元素自身的大小（宽度高度）

1.2 offset 与 style 区别

2. 元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

3. 元素滚动 scroll 系列

3.1 元素 scroll 系列属性

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

3.2 页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

3.3 页面被卷去的头部兼容性解决方案

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

1. 声明了 DTD，使用 document.documentElement.scrollTop
2. 未声明 DTD，使用 document.body.scrollTop
3. 新方法 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

三大系列总结

他们主要用法：

1. offset系列 经常用于获得元素位置 offsetLeft offsetTop
2. client 经常用于获取元素大小 clientWidth clientHeight
3. scroll 经常用于获取滚动距离 scrollTop scrollLeft
4. 注意页面滚动的距离通过 window.pageXOffset 获得

mouseenter 和mouseover的区别

mouseenter 鼠标事件

 当鼠标移动到元素上时就会触发 mouseenter 事件  类似 mouseover，它们两者之间的差别是  mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发  之所以这样，就是因为mouseenter不会冒泡  跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡

立即执行函数

1. 本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

本地存储特性

1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大，sessionStorage约5M、localStorage约20M 4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

2. window.sessionStorage

1、生命周期为关闭浏览器窗口 2、在同一个窗口(页面)下数据可以共享 3. 以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

删除所有数据：

sessionStorage.clear()

3. window.localStorage

1、声明周期永久生效，除非手动删除 否则关闭页面也会存在 2、可以多窗口（页面）共享（同一浏览器可以共享） 3. 以键值对的形式存储使用

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

删除所有数据：

localStorage.clear()