版权声明:本文为个人知识整理,欢迎指正、交流、转载。 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)