Window innerWidth innerHeight 属性

Window 对象参考手册 Window 对象

定义和用法

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

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

innerWidth 和 innerHeight 是只读属性。

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


语法

获取文档显示区的宽度与高度:

window.innerWidth
window.innerHeight

设置文档显示区的宽度与高度:

window.innerWidth=pixels
window.innerHeight=pixels


浏览器支持

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

属性
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 属性。


实例

实例

获取窗口的高度与宽度:

var w=window.innerWidth; var h=window.innerHeight;

尝试一下 »

以下演示了 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>";

尝试一下 »

实用的 JavaScript 方案(涵盖所有浏览器,包含 IE8 及以下版本的浏览器):

实例

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

尝试一下 »


Window 对象参考手册 Window 对象