Window innerWidth 属性

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);

테스트를 보세요‹/›

JavaScript 객체

JavaScript 참조 매뉴얼

JS DOM 참조 매뉴얼

Window innerWidth 属性

语法：

浏览器兼容性

技术细节

更多实例

관련 참조