Window outerWidth 与 outerHeight 属性

实例

获取浏览器窗口的高度和宽度:

<!DOCTYPE html>
<html>
<body>
<p>单击按钮可显示此浏览器窗口的高度和宽度（包括工具栏和滚动条）。</p>
<button onclick="myFunction()">试一试</button>
<p><strong>备注:</strong>IE8 及更早版本不支持 outerWidth 和 outerHeight 属性。</p>
<p id="demo">
<script>
function myFunction() {
  var w = window.outerWidth;
  var h = window.outerHeight;
  document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
}
</script>
</body>
</html>

运行一下

定义与用法

outerWidth 属性返回浏览器窗口的外部宽度，包括所有界面元素（如工具栏/滚动条）。

outerHeight 属性返回浏览器窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。

这些属性是只读的。

提示：使用 innerWidth 和 innerHeight 属性获取窗口内容区域（不带工具栏的窗口/框架）的宽度/高度。

浏览器支持

表中的数字指定完全支持该特性的第一个浏览器版本。

属性
outerWidth	1.0	9.0	1.0	3.0	9.0
outerHeight	1.0	9.0	1.0	3.0	9.0

语法

window.outerWidthwindow.outerHeight

技术细节

返回值:	一个数字，表示浏览器窗口的宽度和/或高度，包括所有界面元素，以像素为单位

更多实例

实例

在一个示例中演示了 innerWidth、innerHeight、outerWidth 和 outerHeight:

<!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<script>
var txt = "";
txt += "<p>innerWidth: " + window.innerWidth + "</p>";
txt += "<p>innerHeight: " + window.innerHeight + "</p>";
txt += "<p>outerWidth: " + window.outerWidth + "</p>";
txt += "<p>outerHeight: " + window.outerHeight + "</p>";
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>