js 兼容浏览器

一、获取样式
获取元素正在使用的样式（只读样式，仅IE支持）： element.currentStyle.样式名称
获取元素正在使用的样式（只读样式，IE8除外）： getComputedStyle(element, null).样式名称
TIPS: 返回object对象，该对象中封装了当前元素的对应样式，参数一：目标元素，参数二：伪元素，第二个参数不是必须的，当不查询伪类元素的时候可以忽略或者传入 null。
(element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式)
兼容element.currentStyle.styleName 和 getComputedStyle(element, null).styleName 的通用方式：

// let my_div = document.getElementById('myDiv')
// getStyle(my_div, '样式名称')
function getStyle(elementObj, attrName){
	if ( window.getComputedStyle) {
	    // 常见具备getComputedStyle() 的浏览器
	    // getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式
	    return getComputedStyle(elementObj, null)[attrName]
	} else {
	    // IE8 等不具备getComputedStyle() 浏览器
	    return elementObj.currentStyle[attrName]
	}
}

二、兼容IE8以下，获取className节点的元素。
* document.getElementsByClassName()
功能：通过class的名字获取符合条件的元素
* node.getElementsByClassName()
指定node节点下，符合条件的元素。

function elementsByClassName(node, className) {
    var res = []
    // 查找node所有的子节点
    var nodes = node.getElementsByTagName('*')
    for ( var i=0; i<nodes.length; i++ ) {
        if (nodes[i].className === className) {
            res.push(node[i])
        }
    }
    return res
}

三、 阻止浏览器默认行为
*//e.prentDefault() 方法阻止　　谷歌火狐的方法
* //e.returnValue=false; 方法阻止 IE8以下的方法

function preDef(e) {
    if (e.preventDefault) {
       e.preventDefault()
    } else {
       e.returnValue = false
    }
}

// 调用测试
window.onload = function() {
    var oA = document.getElementById('a')
    oA.onclick = function(ev) {
       var e = ev || window.event
       preDef(e) // 调用
    }
}

四、 跨浏览器的阻止冒泡

function stopBubble(e){
    if(e.cancelBubble){
        e.cancelBubble = true;
    }else{
        e.stopPropagation();
    }
}

五、 事件

function(ev){
    var e = ev || window.event;
}

六、键盘事件对象属性

function(ev){
     var e = ev || window.event;
     var which = e.keyCode || e.which;	//keyCode
     var which = e.charCode || e.which;	//charCode
 }

七、获取当前事件里的触发对象 target

function(ev){
    var e = ev || window.event;
    var target = e.target || window.event.srcElement;
}

八、获取水平滚动的距离

var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;

九、获取垂直滚动距离

var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

十、 事件监听

// 添加事件
function addEvent(node,eventType, func){
    if(node.addEventListener){
        node.addEventListener(eventType, func, false);
    }else{
        node.attachEvent("on" + eventType, func);
    }
}


// 删除事件
function removeEvent(node, eventType, func){
    if(node.removeEventListener){
        node.removeEventListener(eventType, func);
    }else{
    node.detachEvent("on" + eventType, func)
    }
}

十一： Frame
(1)现有问题：在IE中可以用window.top.frameId和window.top.frameName来得到该Frame所代表的Window，Firefox中只能用window.top.frameName。
(2)解决方法：将Frame的Id和Name设置成相同，使用window.top.frameName来访问Frame。
十二、parentElement，parent.children
(1)现有问题：IE可以使用parentElement获得父结点，parent.children得到结点的所有孩子结点。Firefox不支持。
(2)解决方法：使用parentNode和parent.childNodes。
十三、 对childNodes的解释。
(1)现有问题：IE和Firefox中对childNodes的解释不同，IE不会包含空白文本结点，而Firefox会包含。
(2)解决方法：使用childNodes过滤文本结点，如下：

var children = elem.childNodes;
for (i = 0; i < children.length; i++) {
    if (children[i].nodeType != 3) { // 过滤文本结点
     // ...
    }
}

十四、对document.getElementById的解释
(1)现有问题：IE中getElementById不仅检查Id属性，也会检查Name属性，当Name属性匹配参数时也会返回该元素。而在Firefox中只会检查Id属性。
(2)解决方法：尽量保持Id和Name相同，不要让一个元素name属性和另一个元素的id属性相同。
十五、语法兼容

1. const
   (1)现有问题：在IE中不能使用const关键字。如const constVar = 32;在IE中这是语法错误。
   (2)解决方法：不使用const，以var代替。
2. 多余的逗号
   (1)现有问题：firefox中对象文字常量容许多余的逗号，在IE中不允许。下面语句在IE中非法。
   var obj = { ‘key’ : ‘aaa’, }
   (2)解决方法：去掉多余逗号。
   十六、 XML
   1、创建XMLHttpRequest
   Firefox使用XMLHttpRequest，IE使用ActiveXObject

    if (window.XMLHttpRequest) {
       req = new XMLHttpRequest();
     } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
     }

2、创建DOM
Firefox和IE创建DOM的方式不同

function createXmlDom() {
  var oXmlDom;
   if (Window.ActiveXObject) { // IE
    oXmlDom = new ActiveXObject("Microsoft.XmlDom");
   } else { // Firefox
    oXmlDom = document.implementation.createDocument("", "", null);
   }
}

十七、 禁止单击鼠标左键并移动鼠标时拖拽图片方法

function imgdragstart() {
    return false;
}

//获得所有图片
var imgs = document.getElementsByTagName('img');

//遍历图片
for(var i = 0; i < imgs.length; i++) {

    //禁止单击鼠标左键并移动鼠标时拖拽图片
    imgs[i].ondragstart = imgdragstart();
}

十八、 当浏览器窗口发生变化时，重新加载整个页面

//监听浏览器窗口大小是否发生变化
window.onresize = function () {

    //重新加载当前页面
    location.reload(true);
}

十九、 获得浏览器到显示屏的距离

//获得浏览器左端到显示屏左端的距离
var leftPos = (typeof window.screenLeft == 'number') ?  window.screenLeft : window.screenX;

//获得浏览器上端到显示屏上端的距离
var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;

二十、 获得竖直方向上的滚动条到浏览器顶部的距离

getScrollTop: function () {
   var scrollPos;
   if (window.pageYOffset) {
     scrollPos = window.pageYOffset;
   } else if (document.compatMode && document.compatMode !== 'BackCompat') {
     scrollPos = document.documentElement.scrollTop;
   } else if (document.body) {
     scrollPos = document.body.scrollTop;
   }
   return scrollPos;
 }

css 兼容浏览器

1. 安装autoprefixer：

npm install autoprefixer --save-dev

2. 找到 postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

3. 重启项目