JavaScript 中 window对象和 dom元素的尺寸问题——0526笔记整理

一、window对象的宽高

1、window.innerWidth 、window.innerHeight 网页可视区域的宽和高。
2、screen 对象的屏幕尺寸
screen.availHeight、screen.availWidth不包含任务栏的宽和高；screen.height、screen.width 指实际的宽和高。

宽和高的其它获取方式：
（1）获取可视区域的宽和高：

document.documentElement.clientWidth 获取网页可视区域的宽
document.documentElement.clientHeight 获取网页可视区域的高

二、dom元素的尺寸相关问题

var box=document.querySelector(".box");

1、 offset

box.offsetTop 如果父元素有相对定位，就是该元素到父元素顶部的距离，父元素没有相对定位，就是到浏览器（可视区域）顶部的距离
box.offsetLeft 同上，到左边的距离
box.offsetWidth 包括边框的宽度，实际宽
box.offsetHeight 包含边框的高度，实际高

2、client

box.clientTop 边框宽
box.clientLeft 边框宽
box.clientWidth 除去边框的宽度，内宽
box.clientHeight 除去边框的高度，内高

3、scroll

box.scrollWidth 元素的实际内容的宽度，不包边框宽度，会随对象中内容超过可视区后而变大。scrollWidth 最小值为 clientWidth
box.scrollHeight 元素的实际内容的高度，不包边框宽度，会随对象中内容超过可视区后而变大。scrollHeight 最小值为 clientHeight
scrollTop 竖向滚动轴的滑动距
scrollLeft 横向滚动轴的滑动距

4、样式里边的宽和高
是否包含边框宽，取决于样式box-sizing是否为border-box