好程序员分享javascript中的常见的兼容写法
1 .获取后一个兄弟节点的兼容写法
var nextElement=oLi3.nextElementSibling||oLi3.nextSibling;
- 获取前一个兄弟节点兼容写法
var previousElement = oLi3.previousElementSibling || oLi3.previousSibling;
- 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);
}
}
