一，JS与css交互基本概述
- css有三种设置样式：行内样式，内部样式及外部样式
- JavaScript获取css样式分两种情况：行内样式获取法和非行内样式获取法。
行内样式
通过element.style.attr(元素.style.属性) 即可获取设置
非行内样式
- 因浏览器的不同又分为两种，即基于IE浏览器的
和 非IE浏览器的如谷歌火狐等。
- 基于IE浏览器的非行内获取法：通过 element.currentStyle['attr']
- 基于非IE如火狐谷歌等非行内获取法：通过 getComputedStyle(element.null/伪类)[attr]
【注意事项】非行内样式获取法，只能获取不能设置。
二，javaScript四大特性家族(offset/scroll/client/event )
三大系类：offset,scroll,client
事件对象：event系类(事件被触发时，鼠标和键盘的状态) （通过属性控制）
2.1 offset系类
offset：偏移量使用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） offsetLeft 和 style.left 区别
① 最大区别在于offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以。
② offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px。
③ offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
④ 如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
（style.left在等号的左边和右边还不一样。左边的时候是属性，右边的时候是值。）
//获取div标签距离父标签的距离。 console.log(oDiv.offsetLeft); console.log(oDiv.offsetTop); // offsetWidth|offsetHeight 宽度：width+边框+内填充 console.log(oDiv.offsetWidth); console.log(oDiv.offsetHeight); // style属性：只能调用行内样式 console.log(oDiv.style.width); //通过currentStyle或者getComputedStyle解决非行内式样式的获取 var width = getStyle(oDiv,"width"); console.log(width);
2.2 client系类
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
（1）clientWidth 和 clientHeight
clientWidth：获取网页可视区域宽度（两种用法）
clientHeight：获取网页可视区域高度（两种用法）
调用者不同，意义不同：
盒子调用，指盒子本身；body/html调用，指可视区域大小。
（2）clientX 和 clientY
clientX：鼠标距离可视区域左侧距离（event调用）
clientY：鼠标距离可视区域上侧距离（event调用）
（3） clientTop 和 clientLeft
获取盒子的 border 宽高
（4）获取屏幕的可视区
var width = (document.documentElement.clientWidth || document.body.clientWidth)
var height = (document.documentElement.clientHeight || document.body.clientHeight)
//获取指定元素的父级元素对象，如果父级对象没有定位直接指向body console.log(oDiv.offsetParent); console.log("-------------------------------------------------"); //clientTop获取上边框的大小 console.log(oDiv.clientTop); //clientLeft获取左边框的大小 console.log(oDiv.clientLeft); //获取指定元素的宽度（width+内填充） console.log(oDiv.clientWidth); //获取指定元素的宽度（width+内填充） console.log(oDiv.clientHeight);//200
2.3 Scroll系类
scroll翻译过来就是滚动的，我们使用scroll系类的相关属性可以
动态得到该元素的大小滚动距离等
（1） scroll Width和scroll Height（不包括border）
检测盒子的宽度。（调用者：节点元素。属性）
盒子内容的宽度。（如果有内容超出了，显示内容的高度）
IE567可以比盒子小。IE8+火狐谷歌不能比盒子小
2）scrollTop 和 scrollLeft
网页，被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
（3）有兼容性问题
① 未声明 DTD 时（谷歌只认识他）
document.body.scrollTop
② 已经声明DTD 时（IE678只认识他）
document.documentElement.scrollTop
③ 火狐/谷歌/ie9+以上支持的
//获取被滚动条滚去的距离 window.onscroll = function(){ var scrollDemo = scroll(); console.log(scrollDemo.left) console.log(scrollDemo.top) }; //div的实际高度 console.log("width: "+oDiv.scrollHeight); console.log("width: "+oDiv.scrollWidth);
2.4 event 事件对象
（1）概述
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的 信息。
所有浏览器都支持event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。（类似Date）
普通浏览器支持 event（带参，任意参数）
ie 678 支持 window.event（无参，内置）
（2） 事件对象 event 的获取
IE678中，window.event
在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event.
Box.onclick = function (aaa){ aaa就是event }
（3） 兼容获取方式有两种：
不写参数直接使用event;
写参数，但是参数为event
var event = event || window.even
