JS Storage 对象 JavaScript Window 对象

Window innerWidth 属性

JavaScript Window 对象

innerWidth只读属性返回窗口内容区域(视口)的宽度，包括滚动条。

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

语法：

window.innerWidth

示例

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

测试看看‹/›

浏览器兼容性

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

属性
innerWidth	1	1	9	3	9

技术细节

返回值：	一个数字，表示浏览器窗口内容区域的内部宽度，以像素为单位

更多实例

使用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.innerHeight属性

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

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

JavaScript Window 对象

JS Storage 对象 JavaScript Window 对象