好程序员分享javascript中的常见的兼容写法

好程序员分享javascript中的常见的兼容写法

1 .获取后一个兄弟节点的兼容写法

var nextElement=oLi3.nextElementSibling||oLi3.nextSibling;

2. 获取前一个兄弟节点兼容写法

var previousElement = oLi3.previousElementSibling || oLi3.previousSibling;

3. childNodes的兼容使用

function getChildNodes(ele) {

//1.定义一个空的数组

var arr = [];

//2.获取指定元素

var oEle = document.querySelector(ele);

//3.将元素下边的所有儿子拿到

for (var i = 0; i < oEle.childNodes.length; i++) {

//4.变量判断真的儿子(元素节点nodeType==1)

if (oEle.childNodes[i].nodeType == 1) {

//5.将真儿子添加到数组里

arr.push(oEle.childNodes[i])

}

}

//6.返回数组

return arr;

}

4.拿到第一个儿子

var No1 = oBox.firstElementChild || oBox.firstChild;

5.拿到最后 个儿子

var oLast = oBox.lastElementChild || oBox.lastChild;

6.事件目标对象兼容

var t = event.target || event.srcElement;

滚动条的兼容写法

一 简单兼容写法

document.documentElement.scrollTop||document.body.scrollTop

二 高级兼容写法

function myScroll() {

// ie9以上, google,火狐都能用

if (window.pageXOffset != undefined) {

return {

"left": window.pageXOffset,

"top": window.pageYOffset

}

} else if (document.compatMode == "CSS1Compat") {

// 标准 DTD (有声明头)

return {

"left": document.documentElement.scrollLeft,

"top": document.documentElement.scrollTop

}

}

// 非标准 没有 DTD (没有声明头)

return {

"left": document.body.scrollLeft,

"top": document.body.scrollTop

}

}

html5的新标签在 ie 6 7 8 下有兼容问题,解决原理是 动态创建标签 document.createElement,我可以是快速使用html5shiv插件

事件对象的兼容写法

var e=evt||window.event;

键盘事件

var keyCode = e.keyCode || e.which;

获取样式的兼容写法

function getStyle(obj, attr) {

// 非ie,google,火狐

if (window.getComputedStyle) {

return window.getComputedStyle(obj, null)[attr];

}

//ie 6 8 9

return obj.currentStyle[attr];

}

阻止冒泡的兼容

if (e.stopPropagation) {

e.stopPropagation();

} else {

e.cancelBubble = true;

}

阻止默认行为

if (e.preventDefault) {

e.preventDefault()

} else {

e.returnValue = false;

}

事件监听的兼容写法

oBtn.addEventListener("click", function () {

alert("长沙千锋老罗最帅");

}, {

once: true, // 只能被点一次

useCapture: true // true||false

})

//obj 给指定的元素添加事件

//type 事件的类型(click,mouseenter..)

//fn 函数名称

//useCapTure 捕获还是冒泡

function addEvent(obj, type, fn, useCapTure) {

if (obj.addEventListener) {

obj.addEventListener(type, fn, useCapTure)

} else {

obj.attachEvent("on" + type, fn)

}

}

事件监听移除兼容写法

function removeEvent(obj, type, fn, useCapTure) {

if (obj.removeEventListener) {

obj.removeEventListener(type, fn, useCapTure);

} else {

obj.detachEvent("on" + type, fn);

}

}