1. 程式人生 > >瀏覽器視口大小、HTML元素偏移量的獲取

瀏覽器視口大小、HTML元素偏移量的獲取

 獲取瀏覽器(<html>/<body>)視口大小

這個函式首先檢查document.compatMode屬性,確定瀏覽器是否執行在混雜模式。大多數瀏覽器都執行在標準模式下,所以會自動執行else程式碼。

       function getViewport() {
            if (document.compatMode == "BackCompat") {
                return {
                    width: document.body.clientWidth,
                    height: document.body.clientHeight
                }
            } else {
                return {
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                }
            }
        }

獲取元素偏移量

下面函式可以準確獲得元素相對於document的(左)偏移量,如果想得到上偏移量,只需將程式碼中所有的offsetLeft替換為offsetTop即可。

        function getElementLeft (element) {
            var actualLeft = element.offsetLeft;
            var current = element.offsetParent;
            while (current !== null) {
                actualLeft += current.offsetLeft;
                current = current.offsetParent;
            }
            return actualLeft;
        }