Window innerWidth 与 innerHeight 属性
实例
获取当前 frame 的高度和宽度:
<!DOCTYPE html><html><body><p>单击按钮以显示此框架的高度和宽度。</p><button onclick="myFunction()">试一试</button><p><strong>备注:</strong> IE8及更早版本不支持 innerWidth 和 innerHeight 属性。</p><p id="demo"><script>function myFunction() {var w = window.innerWidth;var h = window.innerHeight;document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;}</script></body></html>
定义与用法
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 |
注意：对于 IE8 和更早版本，您可以使用 clientWidth 和 clientHeight 属性。
语法
window.innerWidthwindow.innerHeight
技术细节
| 返回值: | 一个数字，表示浏览器窗口内容区域的宽度 和/或 内部高度，以像素为单位 |
|---|
更多实例
实例
跨浏览器解决方案（对 IE8 及更早版本使用 clientWidth 和 clientHeight）:
<!DOCTYPE html><html><body><p id="demo"><script>var w = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;var x = document.getElementById("demo");x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";</script></body></html>
实例
在一个示例中演示了 innerWidth、innerHeight、outerWidth 和 outerHeight:
<!DOCTYPE html><html><body><div id="demo"></div><script>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.getElementById("demo").innerHTML = txt;</script></body></html>