获取行内样式
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");
};