Window: innerWidth プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
Window の innerWidth プロパティは読み取り専用で、ウィンドウの内部の幅をピクセル単位で返します。これには垂直スクロールバーがある場合、その幅を含みます。
もっと詳細に言えば、innerWidth の値はウィンドウのレイアウトビューポートの幅から取られます。ウィンドウの内部の高さは innerHeight プロパティを使用して取ることができます。
値
整数値で、ウィンドウのレイアウトビューポートの幅をピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。
ウィンドウの幅を変更するには、 Window の寸法の変更メソッドのうちの一つ、例えば resizeBy() や resizeTo() などを呼び出してください。
使用上の注意
ウィンドウからスクロールバーや境界を引いた幅を取得するには、ルートの <html> 要素の clientWidth プロパティを代わりに使用してください。
innerWidth はすべてのウィンドウと、ウィンドウのように動作するすべてのオブジェクト、例えばタブやフレームで利用できます。
例
js
// これはビューポートの幅を返す console.log(window.innerWidth); // これはフレームセット内のフレームビューポートの幅を返す console.log(self.innerWidth); // これは直近のフレームセットのビューポートの幅を返す console.log(parent.innerWidth); // これはもっとも外側のフレームセットのビューポートの幅を返す console.log(top.innerWidth); デモ
HTML
html
<p> <code>resize</code> イベントを発行させるためにブラウザーのウィンドウの大きさを変えてください。 </p> <p>ウィンドウの幅: <span id="width"></span></p> <p>ウィンドウの高さ: <span id="height"></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); 結果
別なページでこのデモコードの結果を見ることができます。
仕様書
| Specification |
|---|
| CSSOM View Module # dom-window-innerwidth |
ブラウザーの互換性
Loading…