版权声明：本文为个人知识整理，欢迎指正、交流、转载。 https://blog.csdn.net/u014711094/article/details/83863812
1 screen
// 屏幕：1440 * 900
screen.height // 1440
screen.width // 900
// 双屏幕，根据主屏幕位置和任务栏位置，值会变化
// 这里，左侧为主屏幕（1366 * 768），任务栏垂直放置在主屏幕右侧
screen.availHeight // 1400
screen.availWidth // 900
screen.availLeft // 1366, 左边屏幕的width
screen.availTop // 0
2 window
- 浏览器窗口，screenX/Y outer/innerHeight/Width
// window缩放后，值会变化
window.screenX // 1500, 包括左侧屏幕
window.screenY // 100
// chrome有，firefox没有，DOM标准里也没有
window.screenLeft // = screenX
window.screenTop // = screenY
// 窗口高度（包括菜单栏、地址栏、收藏栏、状态栏等），window缩放后，值会变化
window.outerHeight // 900
window.outerWidth // 1440
// 页面可用高度（不包含菜单栏、地址栏、收藏栏、状态栏等），window缩放后，值会变化
// 包含滚动条
window.innerHeight // 781
window.innerWidth // 1440
- 滚动条（scroll）
<html style="height: 1000px; width: 1600px;">
<html>
// document滚动的水平和垂直距离
window.scrollX // 100
window.scrollY // 200
window.pageXOffset // window.scrollX的别名
window.pageYOffset // window.scrollY的别名
// 到边界处不在滚动
window.scrollBy(100, 200)
window.scrollTo(100, 200)
3 Element
<div id="main" style="height: 200px; width: 200px; overflow: scroll; padding: 20px;
border: solid black 20px; background: red;">
</div>
- height width
let m = document.querySelector('#main')
let ms = window.getComputedStyle(m)
m.style.height // "200px"
m.style.width = "300px" // 直接改变
// 不包含滚动条，等于m.clientHeight
ms.height // "183px"
ms.width = "300px" // 直接改变
- clientHeight/Width/Left/Top
// 以下属性只读（read-only）
// the inner height/width of the element
m.clientHeight // 183
m.clientWidth // 183
// the width of the left/top border
m.clientLeft // 20
m.clientTop // 20
- 滚动条（scroll）
// 滚动条（scroll）紧贴边框（border），占用元素内部宽高（clientWidth），不占用padding的宽度
// the scroll view height/width of the element
m.scrollHeight // 223 = clientHeight + borderWidth * 2
m.scrollWidth // 223
// scroll的水平和滚动距离，滚动方法
m.scrollLeft
m.scrollTop
m.scrollTo(10, 20)
m.scrollBy(10, 20)