1.非行内样式获取
高级浏览器
getComputedStyle(obox.false)//获取所有属性
ie浏览器
box.currentStyle//获取所有属性
兼容写法
function getStyle(ele,attr){//ele为获取元素,attr为属性。
var a = "";
if(ele.currentStyle){
a = ele.currentStyle[attr];
}else{
a = getComputedStyle(ele,false)[attr];
}
return a;
}
2.事件冒泡的兼容
高级浏览器
e.stopPropagation()
ie浏览器
e.cancelBubble = true;
兼容写法
function stopBubble(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } }
3.阻止默认事件
高级浏览器
e.preventDefault()
ie浏览器
e.returnValue = false
兼容写法
function stopDefault(e){ if(e.preventDefault){ e.preventDefault() }else{ e.returnValue = false; } }
4.DOM2级绑定事件
高级浏览器
obox.addEventListener("click",fn)
ie浏览器
obox.attachEvent("onclick",fn)
兼容写法和删除兼容
//绑定兼容写法 addEvent(obox,"click",fn1) function fn1(){ console.log(1) } function addEvent(ele,type,cb){ if(ele.addEventListener){ ele.addEventListener(type,cb) }else if(ele.attachEvent){ ele.attachEvent("on"+type,cb) }else{ ele["on"+type] = cb; } }
//删除的兼容 removeEvent(obox,"click",fn1) function removeEvent(ele,type,cb){ if(ele.removeEventListener){ ele.removeEventListener(type,cb) }else if(ele.detachEvent){ ele.detachEvent("on"+type,cb) } else{ele["on"+type] = null; } }
6.ajax的兼容
var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");
7.获取滚动条距离
var sTop = document.documentElement.scrollTop || document.body.scrollTop
8.鼠标编码的兼容
function getButton(evt){ var e = evt || window.event; if(evt){ return e.button; }else if(window.event){ switch(e.button){ case 1 : return 0; case 4 : return 1; case 2 : return 2; } } }
9.获取键盘编码的兼容
evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;