你的位置:首页 > Java教程

[Java教程]js获取页面的可是宽度,占位宽度,获取元素左上角相对页面左上角的位置,页面左上角相对可是区域的位置,元素是否存在于页面可视范围内

 1 var css = (function () { 2   var doEle = document.documentElement, 3     doBody = document.body, 4     elementScrollLeft, 5     elementScrollTop, 6     utils, 7     offsetLeft, 8     offsetTop, 9     offsetParent; 10  11   utils = { 12  13     // 获取页面的可视宽度和高度 14     getAvailPage: function () { 15       return { 16         width: doEle.clientWidth || doBody.clientWidth, 17         height: doEle.clientHeight || doBody.clientHeight 18       }; 19        20       // 以下是进行||运算的缘由,后几个方法也是如此 21       //      if (document.compatMode === 'BackCompat') { // ie6或者没有文档说明下的计算方法 22       //        return { 23       //          width: doBody.clientWidth, 24       //          height: doBody.clientHeight 25       //        }; 26       //      } else { // document.compatMode == "CSS1Compat"(有文档说明) 27       //        return { 28       //          width: doEle.clientWidth, 29       //          height: doEle.clientHeight 30       //        }; 31       //      } 32     }, 33  34     // 获取页面的占位宽度和高度 35     getAllPage: function () { 36       return { 37         width: Math.max(doEle.clientWidth || doBody.clientWidth, doEle.scrollWidth || doBody.scrollWidth), 38         height: Math.max(doEle.clientHeight || doBody.clientHeight, doEle.scrollHeight || doBody.scrollHeight) 39       }; 40     }, 41  42     // 获取元素的绝对位置 43     getOffset: function (element) { 44  45       offsetLeft = element.offsetLeft; 46       offsetTop = element.offsetTop; 47       offsetParent = element.offsetParent; 48  49       while (offsetParent) { 50         offsetLeft += offsetParent.offsetLeft; 51         offsetTop += offsetParent.offsetTop; 52         offsetParent = offsetParent.offsetParent; 53       } 54  55       return { 56         top: offsetTop, 57         left: offsetLeft 58       }; 59     }, 60  61     // 获取元素的相对位置 62     getOffsetRelative: function (element) { 63  64       doScrollLeft = doEle.scrollLeft || window.pageXOffset || doBody.scrollLeft; 65       doScrollTop = doEle.scrollTop || window.pageYOffset || doBody.scrollTop;     66  67       return { 68         top: this.getOffset(element).top - doScrollTop, 69         left: this.getOffset(element).left - doScrollLeft 70       }; 71     }, 72  73     // 是否可见 74     isVisible: function (element) { 75       var left = this.getOffset(element).left, 76         top = this.getOffset(element).top, 77         width = element.offsetWidth, 78         height = element.offsetHeight, 79         docuHeight = this.getAvailPage().height, 80         docuWidth = this.getAvailPage().width, 81         docuLeft = doEle.scrollLeft || window.pageXOffset || doBody.scrollLeft, 82         docuTop = doEle.scrollTop || window.pageYOffset || doBody.scrollTop; 83  84       // 元素下侧超出可视区域上侧 85       // 元素上侧超出可视区域下侧 86       // 元素左侧超出可视区域右侧 87       // 元素右侧超出可视区域左侧 88       if (top + height < docuTop || 89         top > docuTop + docuHeight || 90         left > docuLeft + docuWidth || 91         left + width < docuLeft) { 92         return false; 93       } else { 94         return true; 95       } 96     } 97   }; 98 }; 99 100 return utils;101 102 })();