chrome、高低级IE以及火狐的这种适配

一、得到计算后的样式

高级浏览器的写法（低版本IE不兼容）：

[javascript]  view plain  copy

1. window.getComputedStyle（box）.getPropertyValue（'width'）;  

可以简写成：

[javascript]  view plain  copy

1. getComputedStyle（box）['width'];  

低版本IE的写法（高级浏览器不兼容）：

[javascript]  view plain  copy

1. box.currentStyle.width            或者     box.currentStyle[‘width’]              里面要写驼峰  

解决：能力检测

[javascript]  view plain  copy

1. if（window.getComputedStyle）{  
2.   
3.           alert (getComputedStyle（box）['width']);  
4.   
5. }else{  
6.   
7.           alert (box.currentStyle.width);  
8.   
9. }  

二、IE8和早期版本不认识opacity

在css样式中：

[html]  view plain  copy

1. .box{  
2.   
3.    width:200px;  
4.   
5.    height:200px;  
6.   
7.    opacity:0.5;  
8.   
9.   filter:alpha（opacity=50）;  
10.   
11. }  

在js中：

[html]  view plain  copy

1. var opacity = 0.5 ;  
2.   
3. box.style.opacity = opacity;  
4.   
5. box.style.filter = 'alpha（opacity=' + （opacity*100） + '）' ;  

三、offsetLeft 和offsetTop属性

[html]  view plain  copy

1. IE9以上以及chrome浏览器认为是这个元素左边框外到自己offsetParent对象的左边框内的距离  
2. offsetParent对象叫做偏移参考盒子，是祖先元素中离自己最近已经定位的元素，如果没有盒子定位，就是body  

[html]  view plain  copy

1. IE6、7的offsetParent是：如果自己没有定位，那么自己的offsetParent对象是自己祖先元素中离自己最近的有  
2.   
3. width或者有height的元素，如果自己有定位，那自己的offsetParent对象就是离自己最近有定位的元素  

[html]  view plain  copy

1. IE8和高级浏览器一致，无论自己有没有定位，自己的offsetParent对象都是祖先元素中离自己最近的有定位的元素  
2.   
3. 但是多算了一条边框  

解决方法：自定位，父无边（父亲也要定位）；

四、DOM二级事件绑定

高级浏览器下（低版本IE不支持）：

[html]  view plain  copy

1. div.addeventListener(‘事件’，‘函数’，‘是否监听捕获阶段’）  

[html]  view plain  copy

1. 给同一元素绑定两个事件，不会覆盖，都会执行  
2.   
3. 事件名不加on  
4.   
5. 事件冒泡到window  

低版本IE下（高级浏览器不支持）：

[html]  view plain  copy

1. div.attachEvent（'onclick'，函数）   只能监听冒泡阶段  

[html]  view plain  copy

1. 函数里的this指的不是触发条件的元素，是window对象  
2.   
3. 给同一元素绑定多个事件，会反着执行  
4.   
5. 事件冒泡到document  

解决：

[html]  view plain  copy

1. function 函数名（获取的元素ele，事件eventType，事件触发函数function）{  
2.   
3.         if（ele . addeventListener）{  
4.   
5.                   ele . addEventListener（eventType，function，false）;  
6.   
7.        }else if（ele . attchEvent）{  
8.   
9.                   ele.attchEvent（'on' + eventType，function（）{   
10.   
11.                         function.call（ele）；  
12.   
13.                   }）  
14.   
15.        }  
16.   
17. }  

五、阻止默认事件

高级浏览器下：

[html]  view plain  copy

1. event . preventDefault（）  

低版本IE下：

[html]  view plain  copy

1. returnValue = false ; 或者  return false;  

IE的event对象是window对象的属性，不是事件的实参,所以还需要适配event

解决方法   举例：

[html]  view plain  copy

1. document . onmousewheel = function （event）{  
2.   
3.        event = event || window . event；  
4.   
5.        if（event.perventDefault）{  
6.   
7.                 event.preventDefault（）；  
8.   
9.        }else{  
10.   
11.                 returnValue = false；  //也可以写成return false ；  
12.   
13.         }  
14.   
15. }  

六、页面卷动值

[html]  view plain  copy

1. window . onscroll = function（）{}  

高级浏览器认为卷动值是body属性 ， IE6、7、8认为是html的属性

解决：

[html]  view plain  copy

1. 元素 . innerHtml = document . body . scrollTop ||  document . documentElement . scrollTop ；   

七、鼠标滚轮事件

注意：window.onscroll是窗口的卷动事件，不管因为什么（滚轮、滚动条、上下键）导致页面卷动了，

都会触发window.onscroll事件，而滚轮事件是鼠标滚动的时候触发，不一定会引起页面的卷动

高级浏览器和IE下：

[html]  view plain  copy

1. box . onmouseWheel = function （event）{  
2.   
3.           box . innerHtml = event . wheelDelta；  
4.   
5.  }  

[html]  view plain  copy

1. event . wheelDelta属性表示滚轮的方向，鼠标向上滚是120或120的倍数，鼠标向下滚是-120或-120的倍数  

火狐浏览器下：（不兼容onmouseWheel事件，必须用DOM二级事件监听）

[html]  view plain  copy

1. box . addEventListener（‘DOMMouseScroll’，function（event）{  
2.   
3.            box.innerHtml = event . detail ；  
4.   
5. }，false）  
6.   
7. event . detail属性表示滚轮的方向，鼠标向上过滚是-3或-3的倍数，鼠标向下滚是3或3的倍数  

解决：

[html]  view plain  copy

1. function  mouseWheelHandler（event）{  
2.   
3.       event = event || window . event ；                                        //解决IE6、7、8和高级浏览器的不兼容  
4.   
5.       if（event . preventDefault）{                                                 //解决高级浏览器的IE的阻止默认事件  
6.   
7.               event . preventDefault（）；  
8.   
9.       }else{  
10.   
11.                returnValue  = false ；  
12.   
13.       }  
14.   
15.       if（event . wheelDelta）{                                                       //解决其他浏览器和火狐的不兼容  
16.   
17.                var direction  =  event . wheelDelte > 0 ? 1 ： -1 ；  
18.   
19.       }else if（event . detail）{  
20.   
21.                var direction  =  event . detail < 0 ? 1 : -1 ;   
22.   
23.       }  
24.   
25.       div . innerHtml = direction ;  
26.   
27. }