编辑这个页面须要登录或更高权限!

Window innerHeight 属性

JavaScript Window 对象

innerHeight只读属性返回包含滚动条的窗口内容区域(viewport)的高度。

使用outerHeight属性获取整个浏览器窗口的高度。

语法:

window.innerHeight
var h = window.innerHeight;
var w = window.innerWidth;
测试看看‹/›

浏览器兼容性

表中的数字指定了完全支持innerHeight属性的第一个浏览器版本:

属性
innerHeight11939

技术细节

返回值: 一个数字,表示浏览器窗口内容区域的内部高度,以像素为单位。

更多实例

使用onresize事件显示高度和宽度:

<body onresize="myFunc()">

<script>
function myFunc() {
   var w = window.innerWidth;
   var h = window.innerHeight;
   document.getElementById("para").innerHTML = "Width: " + w + "<br>Height: " + h;
}
</script>
测试看看‹/›

跨浏览器解决方案(对于IE8和更早版本使用clientWidth和clientHeight):

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

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
测试看看‹/›

此示例在一个示例中显示了innerWidth,innerHeight,outerWidth和externalHeight:

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.write(txt);
测试看看‹/›

相关参考

窗口(Window)参考:window.innerWidth属性

窗口(Window)参考:window.outerHeight属性

窗口(Window)参考:window.outerWidth属性

JavaScript Window 对象