JavaScript如何实现页面元素的宽高属性控制？

本文共计1938个文字，预计阅读时间需要8分钟。

在JavaScript中，存在大量与高度和宽度相关的属性，例如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、screen.height等。这些属性繁多，容易混淆。

在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、scree.height等等......这么多，傻傻分不清也正常啊。

本文的目标：

1. 理清js及jquery的各种width和height
2. 对width和高度做一些实际的应用

window和document

首先我们来高清两个概念：

1. window和document的区别是什么？
2. window.location和document.location是一样吗？

第一个问题：

1. Window对象表示浏览器中打开的窗口；window对象可以省略。比如alert()、window.alert()。
2. Document对象是Window对象的一部分。