關(guān)于網(wǎng)頁的寬&高

Gu_Yan 發(fā)布于2019-08-21 18:25 / 488人閱讀

摘要：網(wǎng)頁當(dāng)前可見高寬和兩者分別返回網(wǎng)頁元素的總高度總寬度。網(wǎng)頁總高度網(wǎng)頁總寬度和兩者分別表示元素的水平滾動條向右滾動的像素值，以及垂直滾動條向下滾動的像素值。若網(wǎng)頁內(nèi)沒有滾動條，則其值為。

1. Element.clientHeight和Element.clientWidth

兩者分別返回元素節(jié)點(diǎn) 可見部分 的高度和寬度。此“可見部分”包括padding、但不包括border、margin和滾動條。

let rootElement = document.documentElement;

//網(wǎng)頁當(dāng)前可見高&寬
rootElement.clientHeight
rootElement.clientWidth

2. Element.scrollHeight和Element.scrollWidth

兩者分別返回網(wǎng)頁元素的總高度 & 總寬度。其包括padding，但不包括border、margin和滾動條。

let rootElement = document.documentElement;

//網(wǎng)頁總高度
rootElement.scrollHeight
document.body.scrollHeight
document.body.clientHeight

//網(wǎng)頁總寬度
rootElement.scrollWidth
document.body.scrollWidth
document.body.clientWidth

3. Element.scrollLeft和Element.scrollTop

兩者分別表示元素的水平滾動條向右滾動的像素值，以及垂直滾動條向下滾動的像素值。若網(wǎng)頁內(nèi)沒有滾動條，則其值為 0。

let rootElement = document.documentElement;

//當(dāng)垂直滾動條滾到最底部時(shí)，返回 true
rootElement.scrollHeight - rootElement.scrollTop === rootElement.clientHeight

//當(dāng)水平滾動條滾到最右側(cè)時(shí)，返回 true
rootElement.scrollWidth - rootElement.scrollLeft === rootElement.clientWidth

4. Element.offsetHeight和Element.offsetWidth

兩者包括padding、border和滾動條。

let rootElement = document.documentElement;

//網(wǎng)頁總高度
rootElement.offsetHeight
document.body.offsetHeight

//網(wǎng)頁總寬度
rootElement.offsetWidth
document.body.offsetWidth

綜上，獲取網(wǎng)頁高度&寬度的方法有：

let rootElement = document.documentElement;

//由于和的寬度可能設(shè)的不一樣，從上取值會更保險(xiǎn)一點(diǎn)。

//網(wǎng)頁總高度
rootElement.offsetHeight
rootElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight
//網(wǎng)頁總寬度
rootElement.offsetWidth
rootElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth


//可見部分高度
window.innerHeight             //包括滾動條
rootElement.clientHeight       //不包括滾動條
//可見部分寬度
window.innerWidth              //包括滾動條
rootElement.clientWidth        //不包括滾動條