轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PYTHON MYSQL PHP GIT 问答 工具 导航 更多 实例 参考

Window innerWidth 和 innerHeight 属性

实例

获取窗口的高度与宽度:

var w = window.innerWidth;
var h = window.innerHeight;
亲自试一试 »

页面下方有更多实例。

定义和用法

innerHeight 返回窗口的文档显示区的高度，如果有垂直滚动条，也包括滚动条高度。

innerWidth 返回窗口的文档显示区的宽度，如果有水平滚动条，也包括滚动条高度。

innerWidth 和 innerHeight 是只读属性。

提示: 使用 outerWidth 和 outerHeight 属性获取浏览器窗口的宽度与高度。

浏览器支持

表中的数字表示支持该属性的第一个浏览器版本。

属性
innerWidth 1.0 9.0 1.0 3.0 9.0
innerHeight 1.0 9.0 1.0 3.0 9.0

注释: IE 8 及更早 IE 版本不支持这两个属性，可以使用 clientWidth 和 clientHeight 属性。

语法

window.innerWidth
window.innerHeight

技术细节

返回值: 数值，表示浏览器窗口内容区域的宽度或内部高度，以像素为单位

更多实例

实例

跨浏览器解决方案（在IE8 及更早版本中使用clientWidth和clientHeight）:

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
亲自试一试 »

实例

在此实例中演示了innerWidth、innerHeight、outerWidth 和 outerHeight:

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>";
亲自试一试 »
❮ Window 对象