一、得到计算后样式
高级浏览器的写法(低版本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或-23的倍数,鼠标向下滚是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 ; }