关于网页的宽&高

时间 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        //不包括滚动条

关于网页的宽&高

1. Element.clientHeight和Element.clientWidth

2. Element.scrollHeight和Element.scrollWidth

3. Element.scrollLeft和Element.scrollTop

4. Element.offsetHeight和Element.offsetWidth

综上，获取网页高度&宽度的方法有：

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

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

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

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