虽说大多数年轻人用的都是Chrome，firefox等高版本浏览器；但不乏少数长辈，机关单位群体由于各种原因用的老版本浏览器、IE浏览器等。
控制着页面的大多数功能、用户的交互等的JS不像CSS那样，CSS不做兼容的话在低版本浏览器顶多页面丑了点，JS不做兼容的话整个页面的交互功能几乎就不能用了，除非我们开发人员的雇主想放弃这部分客户，否则我们或多或少都会涉及到兼容问题。
那么下面就来说说常见的DOM与BOM操作的兼容吧！
1.获取元素节点的样式
（1）行内样式的读写：
内联样式的内置属性读写 ： node.style.属性名
此方法操作的是行内样式，无法读取到非行内样式的值的弊端
（2） 样式的读写（行内与内部样式表都可以读取到，无法读取到外部引入的css文件中的样式） // currentStyle 支持IE浏览器
// getComputedStyle(el,伪类)[attr] 支持非IE，第二个形参伪类可以不传，则默认为null/false。表示不查询伪类
function getStyle(node, attr) {
var value = node.currentStyle ? node.currentStyle[attr] : getComputedStyle(node, false)[attr]
return value
}
一、BOM兼容
（1）获取当前浏览器窗口大小
//window.innerWidth/innerHeight 不兼容IE浏览器
//document.documentElement.clientWidth/clientHeight 兼容IE 和火狐浏览器
function browerSize() {
let width = window.innerWidth || document.documentElement.clientWidth
let height = window.innerHeight || document.documentElement.clientHeight
let obj = {width,height}
return obj
}
(2)获取滚动条滚动距离的兼容函数
//document.body 不兼容IE
//document.documentElement 兼容IE
function scrollSize() {
let left = document.documentElement.scrollLeft || document.body.scrollLeft
let top = document.documentElement.scrollTop || document.body.scrollTop
let obj = { left,top}
return obj
}
(3)键盘事件，键值的兼容获取
//形参event为event事件对象，在事件的回调函数中调用此方法时，需要将event对象作物实参传递过来
//ev.which 支持IE低版本，ev.keycode支持高版本浏览器
function getKeyCode(event){
let ev = event || window.event
let code = ev.keycode ||ev.which
return code
}
二、DOM事件兼容
（1） 取消冒泡兼容
//eve.stopPropagation() 兼容非IE
//eve.cancelBubble 兼容IE
function cancelPropagation(event) {
let eve = event || window.event;
eve.stopPropagation ？ eve.stopPropagation() ：eve.cancelBubble
}
(2) js阻止标签的默认行为 注：一般为点击有默认行为的标签
// eve.preventDefault() 不支持IE
//eve.returnValue = false 支持IE
function stopDefault(event) {
let eve = event || window.event;
eve.preventDefault ? eve.preventDefault() : eve.returnValue = false;
}
（3）添加事件监听的兼容
//addEventListener 不兼容IE
//attachEvent 兼容IE
// el['on'+event] 低版本特殊浏览器 （IE6以下及其他低版本）
function addEve(el, event, fn) {
if (el.addEventListener) {
el.addEventListener(event, fn)
} else if (el.attachEvent) {
el.attachEvent('on' + event, fn)
} else {
el['on' + event] = fn
}
}
（4） 移除事件监听的兼容
//addEventListener 不兼容IE
//attachEvent 兼容IE
// el['on'+event] 低版本特殊浏览器
function delEve(el, event, fn) {
if (el.removeEventListener) {
el.removeEventListener(event, fn)
} else if (el.attachEvent) {
el.detachEvent('on' + event, fn)
} else {
el['on' + event] = null
}
}
（5）获取事件源对象的兼容写法
// eve.target 不支持IE
// eve.srcElement 支持IE
function getTarget(eve) {
return eve.target || eve.srcElement
}
