js获取页面的可视宽高度，占位宽高度，获取元素左上角相对页面左上角的位置，元素左上角相对可是区域的位置，元素是否存在于页面可视范围内

var css = (function () { // 以下方法兼容ie7+，chrome（亲测），ie6没有测试（应该也是可以支持的）
    var doEle = document.documentElement,
        doBody = document.body,
        doScrollLeft,
        doScrollTop,
        utils,
        offsetLeft,
        offsetTop,
        offsetParent;

    utils = {

        // 获取页面的可视宽度和高度
        getAvailPage: function () {
            return {
                 doEle.clientWidth || doBody.clientWidth,
                height: doEle.clientHeight || doBody.clientHeight
            };
            
            // 以下是进行||运算的缘由，后几个方法也是如此
            //            if (document.compatMode === 'BackCompat') { // ie6或者没有文档说明下的计算方法
            //                return {
            //                     doBody.clientWidth,
            //                    height: doBody.clientHeight
            //                };
            //            } else { // document.compatMode == "CSS1Compat"（有文档说明）
            //                return {
            //                     doEle.clientWidth,
            //                    height: doEle.clientHeight
            //                };
            //            }
        },

        // 获取页面的占位宽度和高度
        getAllPage: function () {
            return {
                 Math.max(doEle.clientWidth || doBody.clientWidth, doEle.scrollWidth || doBody.scrollWidth),
                height: Math.max(doEle.clientHeight || doBody.clientHeight, doEle.scrollHeight || doBody.scrollHeight)
            };
        },

        // 获取元素的绝对位置
        getOffset: function (element) {

            offsetLeft = element.offsetLeft;
            offsetTop = element.offsetTop;
            offsetParent = element.offsetParent;

            while (offsetParent) {
                offsetLeft += offsetParent.offsetLeft;
                offsetTop += offsetParent.offsetTop;
                offsetParent = offsetParent.offsetParent;
            }

            return {
                top: offsetTop,
                left: offsetLeft
            };
        },

        // 获取元素的相对位置
        getOffsetRelative: function (element) {

            doScrollLeft = doEle.scrollLeft || window.pageXOffset || doBody.scrollLeft;
            doScrollTop = doEle.scrollTop || window.pageYOffset || doBody.scrollTop;　　　　

            return {
                top: this.getOffset(element).top - doScrollTop,
                left: this.getOffset(element).left - doScrollLeft
            };
        },

        // 是否在可视区域可见
        isVisible: function (element) {
            var left = this.getOffset(element).left,
                top = this.getOffset(element).top,
                width = element.offsetWidth,
                height = element.offsetHeight,
                docuHeight = this.getAvailPage().height,
                docuWidth = this.getAvailPage().width,
                docuLeft = doEle.scrollLeft || window.pageXOffset || doBody.scrollLeft,
                docuTop = doEle.scrollTop || window.pageYOffset || doBody.scrollTop;

            // 元素下侧超出可视区域上侧
            // 元素上侧超出可视区域下侧
            // 元素左侧超出可视区域右侧
            // 元素右侧超出可视区域左侧
            if (top + height < docuTop ||
                top > docuTop + docuHeight ||
                left > docuLeft + docuWidth ||
                left + width < docuLeft) {
                return false;
            } else {
                return true;
            }
        }
    };
};

return utils;

})();