blob: fad1ee4c7033bfd164a8120b1873c809b376b616 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
title: Window.innerWidth
slug: Web/API/Window/innerWidth
tags:
- API
- CSSOM View
- HTML DOM
- innerWidth
translation_of: Web/API/Window/innerWidth
---
<div>{{APIRef}}</div>
<p><span class="seoSummary">只读的 {{domxref("Window")}} 属性 <code><strong>innerWidth</strong></code> 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。</span></p>
<p>更确切地说，<code>innerWidth</code> 返回窗口的 {{Glossary("layout viewport")}} 的宽度。 窗口的内部高度——布局视口的高度——可以从 {{domxref("Window.innerHeight", "innerHeight")}} 属性中获取到。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">let <var>intViewportWidth</var> = window.innerWidth;</pre>
<h3 id="值">值</h3>
<p>一个整数型的值表示窗口的布局视口宽度是以像素为单位的。这个属性是只读的，并且没有默认值。</p>
<p>若要更改窗口的宽度，请使用 {{domxref("Window")}} 的方法来调整窗口的大小，例如{{domxref("Window.resizeBy", "resizeBy()")}} 或者 {{domxref("Window.resizeTo", "resizeTo()")}}。</p>
<h2 id="使用说明">使用说明</h2>
<p>如果你需要获取除去滚动条和边框的窗口宽度，请使用根元素 {{HTMLElement("html")}} 的{{domxref("Element.clientWidth", "clientWidth")}} 属性。</p>
<p><code>innerWidth</code> 属性在任何表现类似于窗口的任何窗口或对象（例如框架或选项卡）上都是可用的。</p>
<h2 id="示例">示例</h2>
<pre class="brush: js">// 返回视口的宽度
var intFrameWidth = window.innerWidth;
// 返回一个框架集内的框架的视口宽度
var intFrameWidth = self.innerWidth;
// 返回最近的父级框架集的视口宽度
var intFramesetWidth = parent.innerWidth;
// 返回最外层框架集的视口宽度
var intOuterFramesetWidth = top.innerWidth;</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSSOM View', '#dom-window-innerwidth', 'window.innerWidth')}}</td>
<td>{{Spec2('CSSOM View')}}</td>
<td>初识定义</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">此页面上的兼容性表格是根据结构化数据生成的。如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个拉取请求。</div>
<p>{{Compat("api.Window.innerWidth")}}</p>
<h2 id="参考">参考</h2>
<ul>
<li>{{domxref("window.outerWidth")}}</li>
<li>{{domxref("window.innerHeight")}}</li>
<li>{{domxref("window.outerHeight")}}</li>
</ul>
|
