Web APIs中屏幕（Screen）、窗口（Window）、元素（Element）中的高度、宽度、滚动条总结

最新推荐文章于 2024-03-20 14:55:16 发布

苦笔

最新推荐文章于 2024-03-20 14:55:16 发布

阅读量613

点赞数

分类专栏： Web APIs 文章标签： Web APIs 窗口元素高度宽度

本文链接：https://blog.csdn.net/u014711094/article/details/83863812

版权

Web APIs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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)