關於網頁的寬&高

時間 2019-12-07

標籤關於網頁欄目 HTML 简体版

原文原文鏈接

1. `Element.clientHeight`和`Element.clientWidth`

二者分別返回元素節點 可見部分 的高度和寬度。此「可見部分」包括padding、但不包括border、margin和滾動條。javascript

let rootElement = document.documentElement;

//網頁當前可見高&寬
rootElement.clientHeight
rootElement.clientWidth

2. `Element.scrollHeight`和`Element.scrollWidth`

二者分別返回網頁元素的總高度 & 總寬度。其包括padding，但不包括border、margin和滾動條。html

let rootElement = document.documentElement;

//網頁總高度
rootElement.scrollHeight
document.body.scrollHeight
document.body.clientHeight

//網頁總寬度
rootElement.scrollWidth
document.body.scrollWidth
document.body.clientWidth

3. `Element.scrollLeft`和`Element.scrollTop`

二者分別表示元素的水平滾動條向右滾動的像素值，以及垂直滾動條向下滾動的像素值。若網頁內沒有滾動條，則其值爲 0。java

let rootElement = document.documentElement;

//當垂直滾動條滾到最底部時，返回 true
rootElement.scrollHeight - rootElement.scrollTop === rootElement.clientHeight

//當水平滾動條滾到最右側時，返回 true
rootElement.scrollWidth - rootElement.scrollLeft === rootElement.clientWidth

4. `Element.offsetHeight`和`Element.offsetWidth`

二者包括padding、border和滾動條。code

let rootElement = document.documentElement;

//網頁總高度
rootElement.offsetHeight
document.body.offsetHeight

//網頁總寬度
rootElement.offsetWidth
document.body.offsetWidth

綜上，獲取網頁高度&寬度的方法有：

let rootElement = document.documentElement;

//因爲<html>和<body>的寬度可能設的不同，從<body>上取值會更保險一點。

//網頁總高度
rootElement.offsetHeight
rootElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight
//網頁總寬度
rootElement.offsetWidth
rootElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth


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