前端兼容性问题怎么解决（js常见的兼容性问题解决方法）
前端兼容性问题怎么解决，一般兼容性问题都体现到DOM和事件上，这里我们
只聊ie6+版本浏览器，下面是js常见的兼容性问题解决方法，希望小伙伴们别纠结更低版本浏览器哈。
一、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
-
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
-
操作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)
}
}
整理不易，如有遗漏还请多多包涵。
共有 0 条评论