Window: innerWidth プロパティ
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 |
ブラウザーの互換性
BCD tables only load in the browser