兼容性问题

一 js兼容问题

1. document.body.scrollTop在各大浏览器的兼容问题

• 完美解决问题的代码

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

2. 原生ie8不支持console.log，模拟的支持

3. 阻止事件冒泡以及事件e的获取

function stopBubble(e) {
    if (e && e.stopPropagation){ // 标准写法
    	e.stopPropagation();
    }else{ // ie写法
    	(event || window.event).cancelBubble = true;
    }
}

4. 获取样式，el.style只可以获取行内样式，需要获取非行内样式

// 兼容获取非行内样式
function getStyle(el, prop) {
    if (el.currentStyle) { // ie
           return el.currentStyle[prop]
    } else { // chrome、ff
                return getComputedStyle(el, null)[prop]; // 第二个参数是伪类元素，当不查询伪类元素的时候可以忽略或者传入null          
    }
 }
 // 如果要查询伪元素,是在第二个参数传入匹配的伪元素的字符串
 getComputedStyle(document.getElementById("one"), '::after').width

5. 获取dom对象

• getElementsByClassName ie8不支持

6. 监听事件

• ie是attachEvent，其它浏览器是addEventListener

// 封装方法
function addEvent(el, type, fn, bool) { // 添加事件监听，四个参数分别为对象，事件类型，事件处理函数，指定事件是否在捕获或冒泡阶段执行 true为捕获阶段，false为冒泡
    if (el.addEventListener) { // 标准浏览器
          el.addEventListener(type, fn, bool);
    } else { // ie
          el.attachEvent('on' + type, fn);
    }
  }