在javascript中经常遇到一些兼容性的问题,下面博主将列举一些常见的兼容性问题及解决办法
处理innerText和textContent
//处理innerText和textContent
function getInnerText(element){
//判断element是否支持innerText
if(typeof element.innerText === 'string'){
return element.innerText;
}else{
return element.textContent;
}
}
//设置元素之间的内容
function setInnerText(element,content){
if(typeof element.innerText === 'string'){
element.innerText = content;
}else{
element.textContent = content;
}
}
处理firstElementChild的兼容性
//处理firstElementChild的兼容性
function getFirstElementChild(parent) {
//如果当前浏览器支持firstElementChild
if(parent.firstElementChild){
return parent.firstElementChild;
}
var node, nodes = parent.childNodes, i = 0;
while (node = nodes[i++]) {
if (node.nodeType === 1) {
return node;
}
}
return null;
}
注册事件,处理兼容性问题
//注册事件,处理兼容性问题
function addEventListener(element,eventName,callback){
if(element.addEventListener){
element.addEventListener(eventName,callback,false);
}else if(element.attachEvent){
element.attachEvent('on'+eventName,callback);
}else{
element['on'+eventName] = callback;
}
}
移除事件,处理兼容性问题
//移除事件,处理兼容性问题
function removeEventListener(element,eventName,callback){
if(element.removeEventListener){
element.removeEventListener(element,callback,false);
}else if(element.detachEvent){
element.detachEvent('on'+eventName,callback);
}else{
element['on'+eventName] = null;
}
}
获取页面滚动的距离,并处理兼容性
//获取页面滚动的距离,并处理兼容性
function getScroll(){
return {
scrollTop:document.documentElement.scrollTop || document.body.scrollTop,
scrollLeft:document.documentElement.scrollLeft || document.body.scrollLeft
}
}
获取鼠标在页面上的坐标 解决IE8的问题
//获取鼠标在页面上的坐标 解决IE8的问题
function getPage(e){
return{
pageX:e.clientX + getScroll().scrollLeft,
pageY:e.clientY + getScroll().scrollTop
}
}