chrome、高低级IE以及火狐的各种适配
一、得到计算后样式
高级浏览器的写法（低版本IE不兼容）：
window.getComputedStyle（box）.getPropertyValue（'width'）;可以简写成：
getComputedStyle（box）['width'];低版本IE的写法（高级浏览器不兼容）：
box.currentStyle.width 或者 box.currentStyle[‘width’] 里面要写驼峰解决：能力检测
if（window.getComputedStyle）{
alert (getComputedStyle（box）['width']);
}else{
alert (box.currentStyle.width);
}二、IE8和早期版本不认识opacity
在css样式中：
.box{
width:200px;
height:200px;
opacity:0.5;
filter:alpha（opacity=50）;
}在js中：
var opacity = 0.5 ;
box.style.opacity = opacity;
box.style.filter = 'alpha（opacity=' + （opacity*100） + '）' ;三、offsetLeft 和offsetTop属性
IE9以上以及chrome浏览器认为是这个元素左边框外到自己offsetParent对象的左边框内的距离
offsetParent对象叫做偏移参考盒子，是祖先元素中离自己最近已经定位的元素，如果没有盒子定位，就是bodyIE6、7的offsetParent是：如果自己没有定位，那么自己的offsetParent对象是自己祖先元素中离自己最近的有
width或者有height的元素，如果自己有定位，那自己的offsetParent对象就是离自己最近有定位的元素IE8和高级浏览器一致，无论自己有没有定位，自己的offsetParent对象都是祖先元素中离自己最近的有定位的元素
但是多算了一条边框四、DOM二级事件绑定
高级浏览器下（低版本IE不支持）：
div.addeventListener(‘事件’，‘函数’，‘是否监听捕获阶段’）给同一元素绑定两个事件，不会覆盖，都会执行
事件名不加on
事件冒泡到window低版本IE下（高级浏览器不支持）：
div.attachEvent（'onclick'，函数） 只能监听冒泡阶段函数里的this指的不是触发条件的元素，是window对象
给同一元素绑定多个事件，会反着执行
事件冒泡到document解决：
function 函数名（获取的元素ele，事件eventType，事件触发函数function）{
if（ele . addeventListener）{
ele . addEventListener（eventType，function，false）;
}else if（ele . attchEvent）{
ele.attchEvent（'on' + eventType，function（）{
function.call（ele）；
}）
}
}五、阻止默认事件
高级浏览器下：
event . preventDefault（）低版本IE下：
returnValue = false ; 或者 return false;IE的event对象是window对象的属性，不是事件的实参,所以还需要适配event
解决方法 举例：
document . onmousewheel = function （event）{
event = event || window . event；
if（event.perventDefault）{
event.preventDefault（）；
}else{
returnValue = false； //也可以写成return false ；
}
}六、页面卷动值
window . onscroll = function（）{}高级浏览器认为卷动值是body属性 ， IE6、7、8认为是html的属性
解决：
元素 . innerHtml = document . body . scrollTop || document . documentElement . scrollTop ； 七、鼠标滚轮事件
注意：window.onscroll是窗口的卷动事件，不管因为什么（滚轮、滚动条、上下键）导致页面卷动了，
都会触发window.onscroll事件，而滚轮事件是鼠标滚动的时候触发，不一定会引起页面的卷动
高级浏览器和IE下：
box . onmouseWheel = function （event）{
box . innerHtml = event . wheelDelta；
}event . wheelDelta属性表示滚轮的方向，鼠标向上滚是120或120的倍数，鼠标向下滚是-120或-120的倍数火狐浏览器下：（不兼容onmouseWheel事件，必须用DOM二级事件监听）
box . addEventListener（‘DOMMouseScroll’，function（event）{
box.innerHtml = event . detail ；
}，false）
event . detail属性表示滚轮的方向，鼠标向上过滚是-3或-3的倍数，鼠标向下滚是3或3的倍数解决：
function mouseWheelHandler（event）{
event = event || window . event ； //解决IE6、7、8和高级浏览器的不兼容
if（event . preventDefault）{ //解决高级浏览器的IE的阻止默认事件
event . preventDefault（）；
}else{
returnValue = false ；
}
if（event . wheelDelta）{ //解决其他浏览器和火狐的不兼容
var direction = event . wheelDelte > 0 ? 1 ： -1 ；
}else if（event . detail）{
var direction = event . detail < 0 ? 1 : -1 ;
}
div . innerHtml = direction ;
}