收集的原生JS兼容性的写法-----【持续更新】

var my$={

    //window.event和事件对象e的兼容
    getEvent:function (e) {
        return window.event || e;
    },
    
    //可视化区域的横坐标的兼容代码
    getClientX:function (e) {
        return this.getEvent(e).clientX;
    },
    
    //可视化区域的纵坐标兼容代码
    getClientY:function (e) {
        return this.getEvent(e).clientY;
    },
    
    //页面向左卷去的横坐标
    getScrollLeft:function () {
        return window.pageXOffset||document.body.scrollLeft||document.documentElement
            .scrollLeft||0;
    },
    
    //页面向右卷去的纵坐标
    getScrollTop:function () {
        return window.pageYOffset||document.body.scrollTop||document.documentElement
            .scrollTop||0;
    },
    
    //鼠标的横坐标
    getPageX:function (e) {
        return this.getEvent(e).pageX?this.getEvent(e).pageX:this.getClientX(e)+this
            .getScrollLeft();
    },
    
    //鼠标的纵坐标
    getPageY:function (e) {
        return this.getEvent(e).pageY?this.getEvent(e).pageY:this.getClientY(e)+this
            .getScrollTop();
    },
    
    //兼容获取事件触动时，被传递过来的对象
    getEventObj:function (e) {
        return this.getEvent(e).target?this.getEvent(e).target:this.getEvent(e)
            .srcElement;
    },
    
    //js停止冒泡
    stopBubbling:function (e) {
        window.event? window.event.cancelBubble = true : e.stopPropagation();
    },
    
    //js阻止默认行为
    stopDefault:function (e) {
        window.event? window.event.returnValue = false : e.preventDefault();
    },
    
    // 获取scrollTop和scrollLeft
    scroll:function () {
        if(window.pageYOffset != null) {  // ie9+ 高版本浏览器
            // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }
        else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return {   // 未声明 DTD
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    },
    
    /**
     * 通过传递不同的参数获取不同的元素
     * @param str
     * @returns {*}
     */
    $:function (str) {
        var str1 = str.charAt(0);
        if(str1==="#"){
            return document.getElementById(str.slice(1));
        }else if(str1 === "."){
            return document.getElementsByClassName(str.slice(1));
        }else{
            return document.getElementsByTagName(str);
        }
    },
    
    /**
     * 功能：给定元素查找他的第一个元素子节点，并返回
     * @param ele
     * @returns {Element|*|Node}
     */
    getFirstNode:function (ele) {
        return ele.firstElementChild || ele.firstChild;
    },
    
    /**
     * 功能：给定元素查找他的最后一个元素子节点，并返回
     * @param ele
     * @returns {Element|*|Node}
     */
    getLastNode:function (ele) {
        return ele.lastElementChild || ele.lastChild;
    },
    
    /**
     * 功能：给定元素查找他的下一个元素兄弟节点，并返回
     * @param ele
     * @returns {Element|*|Node}
     */
    getNextNode:function (ele) {
        return ele.nextElementSibling || ele.nextSibling;
    },
    
    /**
     * 功能：给定元素查找他的上一个兄弟元素节点，并返回
     * @param ele
     * @returns {Element|*|Node}
     */
    getPrevNode:function (ele) {
        return ele.previousElementSibling || ele.previousSibling;
    },
    
    /**
     * 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
     * @param ele 元素节点
     * @param index 索引值
     * @returns {*|HTMLElement}
     */
    getEleOfIndex:function (ele,index) {
        return ele.parentNode.children[index];
    },
    
    /**
     * 功能：给定元素查找他的所有兄弟元素，并返回数组
     * @param ele
     * @returns {Array}
     */
    getAllSiblings:function (ele) {
        //定义一个新数组，装所有的兄弟元素，将来返回
        var newArr = [];
        var arr = ele.parentNode.children;
        for(var i=0;i<arr.length;i++){
            //判断，如果不是传递过来的元素本身，那么添加到新数组中。
            if(arr[i]!==ele){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    },
    
    /*
    * 兼容性的获取或者设置标签内容
    * */
    setGetText:function (ele,text) {
        if (text) //设置
        {
            if (typeof teare.textContent == "undefined") {
                teare.innerText = text
            } else {
                teare.textContent = text;
            }
        } else {
            if (typeof teare.textContent == "undefined") {
                return teare.innerText;
            } else {
                return teare.textContent;
            }
        }
    },
    
    /*
    *兼容性获取任意元素的任意样式值
    * */
    getStyle:function (ele,attr) {
        return window.getComputedStyle?
            window.getComputedStyle(ele,null)[attr]:ele.currentStlye[attr];
    },
    
    /*
    * 去除空格
    * */
    trim:function (str) {
        return str.replace(/(^\s+)|(\s+$)/g,"");
        /*
        // 面向对象学习
        String.prototype.aaa = function () {
            var aaa = str.replace(/(^\s+)|(\s+$)/g,"");
            return aaa;
        }
        console.log(str.aaa());
        */
    },
    
    /*
    * 元素显示
    * */
    show:function (ele) {
        ele.style.display = "block";
    },
    
    /*
    * 元素隐藏
    * */
    hiden:function (ele) {
        ele.style.display = "none";
    },
    
    /*
    * 缓动动画-支持透明度和层级
    * */
    animate:function (ele,json,fn) {
        //先清定时器
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            //开闭原则
            var bool = true;
            //遍历属性和值，分别单独处理json
            //attr == k(键)    target == json[k](值)
            for(var k in json){
                //四部
                var leader;
                //判断如果属性为opacity的时候特殊获取值
                if(k === "opacity"){
                    leader = getStyle(ele,k)*100 || 1;
                }else{
                    leader = parseInt(getStyle(ele,k)) || 0;
                }
                //1.获取步长
                var step = (json[k] - leader)/10;
                //2.二次加工步长
                step = step>0?Math.ceil(step):Math.floor(step);
                leader = leader + step;
                //3.赋值
                //特殊情况特殊赋值
                if(k === "opacity"){
                    ele.style[k] = leader/100;
                    //兼容IE678
                    ele.style.filter = "alpha(opacity="+leader+")";
                    //如果是层级，一次行赋值成功，不需要缓动赋值
                    //为什么？需求！
                }else if(k === "zIndex"){
                    ele.style.zIndex = json[k];
                }else{
                    ele.style[k] = leader + "px";
                }
                //4.清除定时器
                //判断: 目标值和当前值的差大于步长，就不能跳出循环
                //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
                if(json[k] !== leader){
                    bool = false;
                }
            }
            console.log(1);
            //只有所有的属性都到了指定位置，bool值才不会变成false；
            if(bool){
                clearInterval(ele.timer);
                //所有程序执行完毕了，现在可以执行回调函数了
                //只有传递了回调函数，才能执行
                if(fn){
                    fn();
                }
            }
        },25);
    },
    
    /*
    * 注册事件
    * */
    MyaddEventListener:function (ele,type,fn) {
        if (ele.addEventListener)
        {
            ele.addEventListener(type,fn,false);
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,fn);
        }else {
            ele["on"+type]=fn;
        }
    },
    
    /*
    * 事件解绑
    * */
    removeEventListener:function (ele,type,fn) {
        if (ele.removeEventListener)
        {
            ele.removeEventListener(type,fn,false);
        }else if(ele.detachEvent){
            ele.detachEvent("on"+type,fn);
        }else {
            ele["on"+type]=null;
        }
    },
}