JS 中 常见的兼容

JS 中 常见的兼容

1、样式的获取：（能力检测）

// 封装获取样式函数 
// ele：元素 attr：样式名（字符串）
function getStyle (ele, attr) {
    
    // if (window.getComputedStyle) { // 标准浏览器
    //     return window.getComputedStyle(ele)[attr];
    // } else { // 低版本IE
    //     return ele.currentStyle[attr];
    // }
 return window.getComputedStyle ? window.getComputedStyle(ele)[attr] :ele.currentStyle[attr];
}

2、获取节点

获取第一个子节点

• 父节点.firstChild：第一个子元素，低版本IE获取第一个子元素，标准浏览器获取的换行，文本。
• 父元素.firstElementChild：第一个子元素，可以解决换行问题，标准浏览器使用

var first = list.firstElementChild || list.firstChild;

获取最后一个子节点

• 父节点.lastChild：最后一个子元素，低版本IE获取最后一个子元素，标准浏览器获取的换行，文本。
• 父元素.lastElementChild：最后一个子元素，可以解决换行问题，标准浏览器使用

var last = list.lastElementChild || list.lastChild;

获取后一个兄弟节点

• nextSibling：下一个兄弟元素，低版本IE
• nextElementSibling：下一个兄弟元素，标准浏览器

var next = li3.nextElementSibling || li3.nextSibling;

获取前一个兄弟节点

• previousSibling：上一个兄弟元素，低版本IE
• previousElementSibling：上一个兄弟元素，标准浏览器

var prev = li3.previousElementSibling || li3.previousSibling;

3、事件

事件的获取

box.onclick = function (event) {
    event = event || window.event; // 标准浏览器默认第一个参数为事件对象,低版本IE需要window.event获取事件对象
    }

事件的绑定

// 给元素添加事件 ele:元素    eventType:事件类型(不加on)（字符串形式）    callback:事件函数
function bind(ele, eventType, callback) {
    if (ele.addEventListener) {
        ele.addEventListener(eventType, callback);
    } else {
        ele.attachEvent('on' + eventType, callback);
    }
}

阻止事件冒泡

JavaScript的事件默认冒泡到window, IE8-冒泡到document.
阻止事件冒泡:

• e.stopPropagation(); 标准浏览器
• e.cancelBubble = true;IE浏览器

box.onclick = function (event) {
	event.stopPropagation ? eeventstopPropagation() : event.cancelBubble = true;
}