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对象叫做偏移参考盒子,是祖先元素中离自己最近已经定位的元素,如果没有盒子定位,就是body
IE6、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 ;

}

你可能感兴趣的:(chrome、高低级IE以及火狐的各种适配)