常见js针对浏览器之间的兼容问题

获取行内样式

function getStyle(obj,attr){  //获取非行间样式，obj是对象，attr是值if(obj.currentStyle){                //针对ie获取非行间样式return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];   //针对非ie}}

获取事件对象的兼容方式

document.onclick=function(eve){var e=eve || window.event;console.log(e);}

事件冒泡的兼容方法

function stopBubble(e){if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble = true;//兼容ie}}

阻止浏览器默认行为的兼容方法

 if( e.preventDefault ){e.preventDefault();}else{window.event.returnValue = false;//ie}

监听事件的设置和移除的兼容方式

// obj为dom对象 inci为事件名称 比如click back为回调函数
// attachEvent 是老版本浏览器使用的添加事件的方法，现在统一使用addEventListener
function addEvent(obj,inci,back){if(obj.addEventListener){obj.addEventListener(inci,back);}else if(obj.attachEvent){obj.attachEvent("on" + inci,back);}else{obj["on"+inci] = back;}}
// obj为dom对象 inci为事件名称 比如click back为回调函数
function removeEvent(obj,inci,back){if(obj.removeEventListener){obj.removeEventListener(inci,back,false);}else if(obj.detachEvent){obj.detachEvent("on" + inci,back);}else{obj["on"+inci] = null;}}

键盘事件的key值

// ie浏览器使用window.event.which
var eve = eve || window.event;
var keyC = eve.keyCode || eve.which;

时间格式

尽可能采用 YYYY/MM/DD HH:mm:ss
因为safari浏览器只支持YYYY/MM/DD HH:mm:ss这种格式，不支持YYYY-MM-DD HH:mm:ss

 "2016-06-10 12:00:00".split('-').join('/')

获取滚动条高度

function onscroll(){const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;return scrollTop
}

innerText的问题

问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。
解决方法：在非IE浏览器中使用textContent代替innerText。

function setInnerText(dom,text) {if(navigator.appName.indexOf("Explorer") >-1){ dom.innerText = text; } else{ dom.textContent = text; }
}

尽量不使用setAttribute()

用setAttribute设置style和onclick这些属性，在IE中是行不通的。为达到兼容各种浏览器的效果，可以用点符号法来设置Element的对象属性、集合属性和事件属性。

const dom = document.getElementById('element');
dom.style.color = "#00f";

设置类名

function AddClass(vName) {element.setAttribute("class", vName);element.setAttribute("className", vName); //for IE
}

input.type属性问题

在ie浏览器下input.type是只读属性，不可以修改，如果要修改，最后移除掉原先的input元素，重新添加一个新的input元素

对象宽高赋值问题

问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法：统一使用 obj.style.height = imgObj.height + ‘px’;

通过id获取dom

问题说明：IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 来取得 id 为 idName 的HTML对象；Firefox下，只能使用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。
解决方法：统一用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。

event.x与event.y问题

问题说明：IE下，even对象有x、y属性，但是没有pageX、pageY属性；Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。

var myX = event.x ? event.x : event.pageX;
var myY = event.y ? event.y : event.pageY;

获取dom父元素

在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。

const children = document.getElementsByClassName('children')[0];
const parent = children.parentNode

访问、设置剪切板中的数据

要访问剪切板中的数据，可以使用clipboardData对象：IE中，这个对象是window对象的属性；而在Firefox，Chrome，Safar中，这个对象是event对象的属性。

const setClipboardText = function (event, value) {if (event.clipboardData) {return event.clipboardData.setData("text/plain", value);} else if (window.clipboardData) {return window.clipboardData.setData("text", value);}
};const getClipboardText = function (event) {const clipboardData = event.clipboardData || window.clipboardData;return clipboardData.getData("text");
};