js原生函數一些封裝

這是一些js原生封裝的函數，主要是為了兼容IE瀏覽器，如下

獲取css樣式

function getStyle(ele, prop) {
        if(window.getComputedStyle) {
            return window.getComputedStyle(ele, null)[prop];
        }else {
            return ele.currentStyle[prop];
        }
    }

 

fixed封裝

function fixed(ele) {
        var w = parseInt(getStyle(ele, 'left')),
            h = parseInt(getStyle(ele,  'top'));
        addEvent(ele, 'scroll', function () {
            ele.style.left = w + getScrollOffset().w + 'px';
            ele.style.top = h + getScrollOffset().h + 'px';
        })
    }

 

獲取瀏覽器可視區域寬度

 function getViewPortOffset() {
        if(window.innerWidth) {
            return {
                w: window.innerWidth,
                h: window.innerHeight
            }
        }else if(document.compatMode = "BackCompat") {
            return {
                w: document.body.clientWidth,
                h: document.body.clientHeigth
            }
        }else {
            return {
                w: document.documentElement.clientWidth,
                h: document.documentElement.clientHeight
            }
        }
    }

 

獲取瀏覽器滾動距離

function getScrollOffset() {
        if(window.pageXOffset) {
            return {
                w: window.pageXOffset,
                h: window.pageYOffset
            }
        }else {
            return {
                w: document.body.scrollLeft + document.documentElement.scrollLeft,
                h: document.body.scrollTop + document.documentElement.scrollTop
            }
        }
    }

 

獲取元素尺寸寬高

 Element.prototype.getElementOffset = function () {
        var objData = this.getBoundingClientRect();
        if(objData.width)  {
            return {
                w: objData.width,
                h: objData.height
            }
        }else {
            return {
                w: objData.right - objData.left,
                h: objData.top - objData.bottom
            }
        }
    }

 

獲取元素相對於瀏覽器的left和top值

 Element.prototype.getElementPosition = function () {
        var x = 0,
            y = 0,
            ele = this;
        while(ele != document.body) {
            x += ele.scrollLeft;
            y += ele.scrollTop;
            ele = ele.offsetParent;
        }
        return {
            x: x,
            y: y
        }
    }

 

綁定事件

 function addEvent(ele, type, handle) {
        if(ele.addEventListener) {
            ele.addEventListener(type, handle, false);
        }else if(ele.attachEvent) {
            ele['temp' + type + handle] = handle;
            ele[type + handle] = function () {
                ele['temp'  + type + handle].call(ele);
            }
            ele.attachEvent('on' + type, ele[type + hadnle]);
        }else {
            ele['on' + type] = handle;
        }
    }

 

取消事件綁定

 function removeEvent(ele, type, handle) {
        if(ele.removeEventListener) {
            ele.removeEventListener(type, handle, false);
        }else if(ele.detachEvent) {
            ele.detachEvent('on' + type, handle);
        }else {
            ele['on' + type] = null;
        }
    }

 

阻止事件冒泡

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

 

取消默認事件

function cancelHandle (event) {
        if(event.preventDefault) {
            event.preventDeault();
        }else {
            event.returnValue = false;
        }
    }

 

拖拽實現

function drag(ele) {
        var disX, disY;
        addEvent(ele, 'mousedown', function (e) {
            var event = e || window.event;
            disX = event.clientX - getStyle(ele, 'left');
            disY = event.clientY - getStyle(ele, 'top');
            addEvent(ele, 'mousemove', mouseMove);
            addEvent(ele, 'mouseup', mouseUp);
            stopBubble(event);
            cancelHandle(event);
        });
        function mouseMove(event) {
            ele.style.left = event.clientX - disX;
            ele.style.top  = event.clientY - disY;
        }
        function mouseUp(event) {
            removeEvent(ele, 'mousemove', mouseMove);
            removeEvent(ele, 'mouseup', mouseUp);
        }
        
    }

 

js異步加載

function asyncLoaded(url, cb) {
        var oScript = document.createElement('script');
        
        if(oScript.readyState) {
            oScript.onreadystatechange = function () {
                if(oScript.readyState == 'loaded' || oScrip.readyState == 'completed') {
                    cb();
                }
            }
        }else {
            oScript.onload = function () {
                cb();
            }
        }

        oScript.src = url;
        document.body.appnedChild(oScript);
    }