一. JS与CSS交互基本介绍
1.1 问题引入
- css样式设置有三种方式：行内样式，内部样式和外部样式。
- JavaScript获取css样式时分为两种情况：行内样式获取罚和非行内样式获取法。
1.2 行内样式
通过element.style.attr(元素.style.属性)即可获取。
1.3 非行内样式
- 因浏览器的不同又分为两种，即基于IE浏览器的 和 非IE浏览器的 如谷歌火狐等。
- 基于IE浏览器的非行内样式获取法：通过
element.currentStyle[attr]
- 基于非IE浏览器的非行内获取法：通过
getComputedStyle(element.null / 伪列)[attr]
注意事项：非行内样式获取法，只能获取不能设置。
// 函数封装，方便多次调用：兼容所有的浏览器 ，包括IE6 7 function getStyle (obj,name){// obj:操作哪一个标签 name:该标签的属性 if(obj.currentStyle){ //兼容IE return obj.currentStyle[name]; }else{ //兼容非IE浏览器 如谷歌，火狐等 return getComputedStyle(obj,false)[name]; } }
二. JavaScript特效之四大家族
- 三大系列：offset ,scroll ,client
- 事件对象：event (事件被触动时，鼠标和键盘的状态)（通过属性控制）
2.1 offset 系列
offset :偏移量，使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
offsetWidth和offsetHeight
- 检测盒子自身宽高 + padding + border
offsetWidth = width + padding + border offsetHeight = height + padding + border
offsetLeft 和 offsetTop
- 检测距离父盒子有定位的左/上的距离
返回距上级盒子中带有定位的盒子左边和上边的距离。
与盒子本身有无定位无关。
如果父级都没有定位则以body为准。
offsetLeft从父级的padding开始算，父级的border不算。
在父盒子有定位的情况下，offsetLeft == style.left(去掉px)
offsetLeft 和 style.left 的区别
- 最大区别在于offsetLeft可以返回没有定位盒子的左侧的距离的位置。style.left不可以。
- offsetLeft返回的是数字，style.left返回的是字符串，除了数字外还带有单位：px
offsetTop 和 style.top 的区别
- offsetTop只读，而style.top可读写。（只读是获取值，可写是赋值）
- 如果没有给HTML元素指定过top样式，则style.top返回的是空字符串。（style.top在等号的左边和右边不一样。左边是属性，右边是值）
2.2 client事件
client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小，元素大小等。
clientWidth 和 clientHeight
clientWidth:获取网页可视区域宽度 clientHeight:获取网页可视区域高度 调用者不同，意义不同： 盒子调用，指盒子本身；body / html 调用，指可视区域大小。 var w1 = document.body.clientWidth; console.log("怪异浏览器====>："+w1) var w2 = document.documentElement.clientWidth; console.log("标准浏览器====>"+w2) console.log("IE9+====>"+window.innerWidth);
clientX 和 clientY
clientX : 鼠标距离可视区域左侧距离（event调用） clientY : 鼠标距离可视区域上侧距离（event调用）
clientTop 和 clientLeft
获取盒子的 border 宽高
2.3 Scroll 系列
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等。
ScrollWidth 和 ScrollHeight (不包括border)
检测盒子的宽高 （调用者 节点属性，属性） 盒子内容的宽高 （如果有内容超出，显示内容的高度） IE567可以比盒子小。IE8 + 火狐谷歌不能比盒子小。
scrollTop 和 scrollLeft
网页被浏览器遮挡的头部和左边部分。 被卷去的头部和左边部分。
有兼容性问题
未声明 DTD 时（谷歌只认识他） document.body.scrollTop 已经声明DTD 时（IE678只认识他） document.documentElement.scrollTop 火狐/谷歌/ie9+以上支持的 window.pageYOffset
2.4 event事件对象
- 在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件相关的信息。
- 所有浏览器都支持event对象，但支持的方式不同。比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。
- （类似Date）普通浏览器支持event（带参，任意参数）IE678支出window.event（无参，内置）
总结 ：他是一个事件中的内置对象，内部装了很多关于鼠标和事件本身的信息。
事件event对象的获取
IE678中，window.event 在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event. Box.onclick = function (aaa){ //aaa就是event }
兼容获取方式
- 不写参数直接使用event 。
- 写参数，但是参数为event 。
var event = event || window.event ;(主要用这种)
