Window: innerWidth 属性

只读的 Window 属性 innerWidth 返回窗口的内部宽度，以像素为单位（即窗口的 布局视窗 的宽度）。这包括垂直滚动条的宽度，如果有的话。

类似地，可以使用 innerHeight 属性获取窗口的内部高度（即布局视窗的高度）。该测量值也考虑了水平滚动条的高度，如果它可见。

值

一个整数，表示窗口的布局视窗的宽度，以像素为单位。此属性为只读，没有默认值。

要更改窗口的宽度，请使用 Window 中用于调整窗口大小的方法之一，例如 resizeBy() 或 resizeTo()。

使用注意事项

如果您需要获取窗口的宽度减去滚动条和边框，请改用根 <html> 元素的 clientWidth 属性。

innerWidth 属性可用于任何窗口或表现得像窗口的对象，例如框架或标签页。

示例

js
// This will log the width of the viewport
console.log(window.innerWidth);

// This will log the width of the frame viewport within a frameset
console.log(self.innerWidth);

// This will log the width of the viewport of the closest frameset
console.log(parent.innerWidth);

// This will log the width of the viewport of the outermost frameset
console.log(top.innerWidth);

演示

HTML

html
<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>

JavaScript

js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function updateSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

updateSize();
window.addEventListener("resize", updateSize);

结果

您也可以 在单独的页面中查看演示代码的结果。

规范

规范
CSSOM View 模块
# dom-window-innerwidth

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅