龙空技术网

JavaScript兼容性汇总

好程序员 612

前言:

如今兄弟们对“html的兼容性问题”都比较关切,朋友们都需要剖析一些“html的兼容性问题”的相关知识。那么小编同时在网摘上汇集了一些有关“html的兼容性问题””的相关资讯,希望朋友们能喜欢,看官们一起来了解一下吧!

一般兼容性问都体现到DOM和事件上

只聊ie6+版本浏览器,希望小伙伴们别纠结更低版本浏览器哈^_^

DOM

获取元素

document.getElementsByclassName 不兼容ie6 7 8解决方法:

function getByClass(oParent,sClass) {

var aResult=[];

var aEle=oParent.getElementsByTagName("*");

var re=new RegExp("\\b"+sClass+"\\b","i");

for (var i=0;i<aEle.length;i++)

{

if(re.test(aEle[i].className))

{

aResult.push(aEle[i]);

}

}

return aResult;

}

document.querySelector 不兼容ie6 7

这个选择器获取方法还是很推荐使用的

解决方法:可以使用 getElementById

document.querySelectorAll 不兼容ie6 7

这个选择器获取方法还是很推荐使用的,和上面不同的是,它是获取一组元素

解决方法:可以使用 getElementsByTagName 或者 上面封装的getByClass

属性

自定义属性操作方法

getAttribute(name) 不兼容ie6 7

setAttribute(name,value) 不兼容ie6 7

removeAttribute(name) 不兼容ie6 7、

解决方法:

// 个人建议加加载完html,使用js给标签赋值

obj.index = 1 // 设置

console.log(obj.index) // 获取

obj.index = '' // 清空

自定义属性data-* 不兼容ie6 7 8 9 10

console.log(obj.dataset.name) 获取

obj.dataset.name = value 设置

解决方法:

function getDataset(ele){

if(ele.dataset){

return ele.dataset;

}else{

var attrs = ele.attributes,

dataset = {},

name,

matchStr;

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

matchStr = attrs[i].name.match(/^data-(.+)/);

if(matchStr){

name = matchStr[1].replace(/-([\da-z])/gi,function(all,letter){

return letter.toUpperCase();

});

dataset[name] = attrs[i].value;

}

}

return dataset;

}

}

操作class方法

classList.add('name') 不兼容ie6 7 8 9

classList.remove('name') 不兼容ie6 7 8 9

解决方法:

function addClass(obj, class){

if(!this.contains(class)){

obj.className +=' ' + class;

}

}

function removeClass(obj,class){

if(obj.className.indexOf(class) !== -1){

var reg= new RegExp(class);

obj.className = obj.className.replace(reg,'');

}

}

节点

节点类一起总结: 前面的不兼容ie6

// 获取子节点

var children = obj.children || obj.childNodes

// 获取第一个子节点

var first = obj.firstElementChild || obj.firstChild

// 获取最后一个子节点

var last = obj.lastElementChild || obj.lastChild

// 获取上一个兄弟节点

var prev = obj.previousElementSibling || obj.nextElementSibling

// 获取下一个兄弟节点

var next = obj.nextElementSibling || obj.nextElementSibling

滚动距离

// 有文档头

// - docuemnt.documentElement.scrollTop / scrollLeft

// 没有文档头

// - document.body.scrollTop / scrollLeft

// 兼容

var top = docuemnt.documentElement.scrollTop || document.body.scrollTop

var left = docuemnt.documentElement.scrollLeft || document.body.scrollLeft

浏览器可视区大小

// 包含工具条与滚动条

// - document.documentElement.clientWidth / clientHeight

// 不包含工具条与滚动条

// - window.innerWidth / innerHeight

// - 使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度

事件

事件对象

// 事件对象

// ev 不兼容ie 6 7 8

// window.event 兼容所有浏览器

document.onclick = function (ev) {

ev = ev || window.event

}

获取页面中鼠标位置

ev.pageX/ev.pageY 不兼容ie6 7 8

解决方案:

var x = ev.clientX + document.documentElement.scrollLeft

var y = ev.clientY + document.documentElement.scrollTop

获取键盘码

ev.keyCode 不兼容火狐

ev.which 不兼容 ie6 7 8

解决方案:

var code = keyCode || which

获取事件源

ev.target 不兼容 ie6 7 8

ev.srcElement 兼容所有浏览器

解决方案:

var src = target || srcElement

阻止默认行为

ev.preventDefault() 不兼容ie6 7 8

ev.returnValue = false 兼容所有浏览器

解决方案:

function stopDefault(ev) {

if (ev && ev.preventDefault) {

ev.preventDefault()

} else {

event.returnValue = false

}

return false;

}

阻止事件冒泡

e.stopPropagation() 不兼容ie6 7 8

ev.cancelBubble = true 兼容所有浏览器

解决方案:

function stopPropagat(ev){

if (ev&& evstopPropagation) {

evstopPropagation()

} else {

event.cancelBubble = true

}

}

事件绑定

obj.addEventListener 不兼容9+

obj.attachEvent 兼容ie6 7 8

解决方案:

function on(obj, type, fn){

if(obj.addEventListener){

obj.addEventListener(type, fn, false)

}else{

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

}

}

事件解除绑定

obj.removeEventListener 不兼容9+

obj.detachEvent 兼容ie6 7 8

解决方案:

function on(obj, type, fn){

if(obj.removeEventListener){

obj.removeEventListener(type, fn, false)

}else{

obj.detachEvent('on'+type, fn)

}

}

整理不易,如有遗漏还请多多包涵^_^

标签: #html的兼容性问题