JavaScript DOM 常用尺寸

JavaScript 操作 DOM 時經常會用到一些尺寸，本文介紹怪異模式和標準模式下的滾動條距離、視窗尺寸、檔案尺寸、元素檔案坐標的兼容性寫法以及視窗滾動到指定位置的方法

怪異和標準模式

瀏覽器在決議 CSS 時有怪異和標準兩種模式，目的是為了向舊版本兼容
標準模式下瀏覽器會按 w3c 規范決議代碼
怪異模式下按瀏覽器自身規范決議代碼，一般會向后兼容 5 個版本
首句使用 <!DOCTYPE html>，則使用 HTML5 規范，即標準模式，不加這句則使用怪異模式
使用document.compatMode 回傳 CSS1Compat 表示處于標準模式，回傳 BackCompat 則為怪異模式

滾動條滾動距離

常見寫法

// 獲取滾動條和上側/左側的距離，即頁面滾動距離
window.pageYOffset/pageXOffset 
document.bady.scrollTop/scrollLeft
document.documentElement.scrollTop/scrollLeft
window.scrollY/scollX

兼容性表

(b) 代表怪異模式，(s) 代表標準模式，C 代表 chrome，F 代表 firefox，O 代表 opera

瀏覽器	IE6789(b)	IE678(s)	IE9(s)	C(bs)	O/F(b)	O/F(s)
documentElement	0	可用	可用	0	0	可用
body	可用	0	0	可用	可用	0
pageOffset	undefined	undefined	可用	可用	可用	可用
scroll	undefined	undefined	undefined	可用	可用	可用

兼容性寫法

function getScrollOffset() {
    if (window.pageXOffset) {
        return {
            top: window.pageYOffset,
            left: window.pageXOffset
        }
    }
    else return {
        top:document.body.scrollTop || document.documentElement.scrollTop,
        left:document.body.scrollLeft || document.documentElement.scrollLeft
    }
}

視窗可視尺寸

常見寫法

// 獲取視窗可視區域寬高
window.innerWidth/innerHeight // 包括滾動條 兼容 IE9 及以上
// window.outerWidrh/outerHeight 包含工具列和滾動條，即瀏覽器視窗大小
document.documentElement.clientWidth/clientHeight // 不包括滾動條 兼容標準模式
document.body.clientWidth/clientHeight // 包括滾動條 兼容怪異模式

兼容性寫法

function getViewportSize() {
        if (window.innerWidth) {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        } else {
            if (document.compatMode === 'BackCompat') {
                return {
                    width: document.body.clientWidth,
                    height: document.body.clientHeight
                }
            } else {
                return {
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                }
            }
        }
    }

檔案滾動尺寸

常見寫法

// 獲取檔案可滾動的總尺寸
document.body.scrollHeight/scrollWidth
document.documentElement.scrollHeight/scrollWidth
// 優先使用 body.scrollHeight
// documentElement.scrollHeight 在低版本 IE 存在問題

兼容性寫法

function getScrollSize() {
    if (document.body.scrollHeight) {
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        }
    } else return {
        width: document.documentElement.scrollWidth,
        height: document.documentElement.scrollHeight
    }
}

元素檔案坐標

offsetParent

元素無 fixed 定位時，offsetParent 為最近的非默認定位的父級元素，沒有則回傳 body

元素有 fixed 定位時，offsetParent 回傳 null

body 的 offsetParent 為 null

offsetTop/offsetLeft

var div = document.getElementById("box");
div.offsetTop/offsetLeft // 相對 offsetParent 元素的偏移

獲取元素在檔案中的坐標

function getElemPositionInDoc(elem) {
    var parent = elem.offsetParent,
        top = elem.offsetTop,
        left = elem.offsetLeft;
    while (parent) {
        top += parent.offsetTop;
        left += parent.offsetLeft;
        parent = parent.offsetParent;
    }
    return {
        top: top,
        left: left
    }
}

視窗滾動

常見寫法

// 滾動到 (x, y) 坐標
// window.scroll() 和 scrollTo() 功能相同
window.scrollTo(x, y);
window.scrollTo({
   top: 100,
   behavior: 'smooth' // 平滑滾動
});

滾動到低部判斷方法

window.innerHeight + window.pageYOffset >= document.body.scrollHeight
// 視窗可視高度 + 垂直滾動條滾動距離 >= 檔案滾動高度
// 注意寫兼容性

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/137745.html

標籤：JavaScript

上一篇：Vue 過濾器

下一篇：如何支持組件的子元素任意擺放