关于网页的宽&高
1. Element.clientHeight
和Element.clientWidth
两者分别返回元素节点 可见部分 的高度和宽度。此“可见部分”包括padding
、但不包括border
、margin
和滚动条
。
let rootElement = document.documentElement;
//网页当前可见高&宽
rootElement.clientHeight
rootElement.clientWidth
2. Element.scrollHeight
和Element.scrollWidth
两者分别返回网页元素的总高度 & 总宽度。其包括padding
,但不包括border
、margin
和滚动条
。
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
。
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
和滚动条
。
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 //不包括滚动条