常用原生JS方法总结（兼容性写法）

JS中的一些兼容性问题
1、获取滚动高度

document.documentElement.scrollTop||document.body.scrollTop

2、获取样式兼容

window.getStyle(dom,styleName){
	return dom.currentStyle?dom.currentStyle[styleName]:getComputedStyle(dom)[styleName];
}

3、事件对象兼容
window.event只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。Firefox必须从源处加入event作参数传递。IE忽略该参数，用window.event来读取该event。
解决方法：

event = event || window.event;

4、event.pageX和event.pageY：获取鼠标相对于整个文档的水平及垂直坐标
event.pageX和event.pageY，IE9之前的版本不支持
　　解决方法：

event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
　　　　event.clientY+(document.documentElement.scrollTop||document.body.scrollTop);

5、 阻止事件冒泡兼容
　　stopPropagation()和cancelBubble，前者是方法，是标准的写法，后者是属性，赋值true表示阻止，是IE的写法。
　　解决方法：
　　　　判断stopPropagation是否存在，如果存在则用标准写法否则则用IE的写法，不可反过来判断。

　event.stopPropagation ? event.stopPropagation() : event.cancelBubble=true;

6、阻止默认行为兼容
　　preventDefault()和returnValue()前者标准写法，后者IE写法。
　　解决方法：
　　 （常规方法）

  event.preventDefault?event.preventDefault():event.returnValue=false;

或者（非常规方法）直接在事件处理程序中return false;
7、事件监听兼容
　　标准浏览器的写法addEventListener()和IE的写法attachEvent()。
　　解决方法：
　　　　判断addEventListener是否存在，如果存在则用否则用IE8以下的版本（含IE8）的绑定方法attachEvent，removeEventListener()和detachEvent()也是一样的用法。

　if(document.all){
　　　　　　dom.attactEvent(“onclick”, fn);
　　　　} else {
　　　　dom.addEventListener(“click”, fn);
　　　　}

8、document.getElementByClassName()：根据类名查找元素，返回集合（IE9及以上版本支持）
　　解决方法：

function getByClassName(className, context) {
       　　context = context || document;
       　　if (document.getElementsByClassName) // 浏览器支持使用 getElementsByClassName
             　　 return context.getElementsByClassName(className);
   　　/* 不支持使用 getElementsByClassName */
   　　// 保存查找到的元素的数组
  　　 var result = [];
   　　// 查找 context 后代的所有元素
   　　var allTags = context.getElementsByTagName("*");
   　　// 遍历所有的元素
   　　for(var i = 0, len = allTags.length; i < len; i++) {
          // 获取当前遍历元素使用的所有 class 类名
          var classNames = allTags[i].className.split(" ");
          // 遍历当前元素的所有类名，和待查找的类名比较
          for (var j = 0, l = classNames.length; j < l; j++) {
                 if (classNames[j] == className) { // 当前所在遍历的元素是要查找出来的其中一个
                        result.push(allTags[i]);
                        break;
                 }
          }
   }
   // 返回查找结果
   return result;

}
9、事件目标对象兼容
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性
　　解决方法：

　var t = event.target || event.srcElement;

10. 获取浏览器窗口大小的三种方法（浏览器的视口，不包括工具栏和滚动条）。
    　　对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
    　　window.innerHeight – 浏览器窗口的内部高度
    　　window.innerWidth – 浏览器窗口的内部宽度
    　　对于 Internet Explorer 8、7、6、5：

    document.documentElement.clientHeight
    　　document.documentElement.clientWidth
    　　或者
    　　document.body.clientHeight
    　　document.body.clientWidth
    解决方法：

    window.innerHeight || document.documentElement.clientHeight
    window.innerWidth || document.documentElement.clientWidth