HTML Window outerWidthプロパティの使い方を解説
HTMLのWindow outerWidthプロパティは、ツールバーやタブ、スクロールバーなど、すべてのインターフェース要素を含むブラウザウィンドウ全体の幅を取得するプロパティです。戻り値はピクセル単位の整数で、読み取り専用となります。
構文
outerWidthプロパティの基本構文は次の通りです。
window.outerWidth
なお、outerWidthはビューポート(コンテンツ表示領域)のみの幅を返すinnerWidthプロパティとは異なり、ウィンドウ外枠も含めた値を返します。用途に応じて使い分けるとよいでしょう。
使用例
それでは、実際にボタンをクリックしてブラウザウィンドウの幅を表示するサンプルを見てみましょう。
サンプルコード
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>HTML Window outerWidthプロパティ</h1>
<button onclick="display()" class="btn">ブラウザウィンドウの幅を表示</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = 'ブラウザウィンドウの幅: ' + window.outerWidth + "px";
}
</script>
</body>
</html>
実行結果
「ブラウザウィンドウの幅を表示」ボタンをクリックすると、インターフェース要素を含むブラウザウィンドウ全体の幅が画面に表示されます。
まとめ
window.outerWidthを使えば、JavaScriptから簡単にブラウザウィンドウ全体の幅(ピクセル)を取得できます。レスポンシブ対応の処理やデバッグ時に役立つので、あわせてwindow.innerWidthとの違いも理解しておきましょう。
-
HTML DOM Window frameElementプロパティの使い方を徹底解説
HTML DOMのWindow frameElementプロパティは、現在のウィンドウが埋め込まれているHTML要素（<embed>、<iframe>、<object>など）を取得するためのプロパティです。ウィンドウがiframeなどの要素に埋め込まれていない場合（トップレベルウィンドウの場合）、このプロパティはnullを返します。そのため、ページがフレーム内で表示されているかどうかを判定したい場面で非常に役立ちます。構文frameElementプロパティの基本的な構文は以下のとおりです。window.frameElement使用例ここでは、HTML DOM
-
HTML DOMのWindow closedプロパティとは？使い方とサンプルコードを解説
HTML DOMのWindow closedプロパティは、ウィンドウが閉じられているかどうかの状態を示す真偽値（boolean）を返します。ウィンドウがすでに閉じている場合はtrue、まだ開いている場合はfalseが返されます。このプロパティは、window.open()で開いたポップアップウィンドウの状態を監視したり、ユーザーによって閉じられたウィンドウを再オープンするかどうかを判定したりする際に非常に便利です。構文Window closedプロパティの構文は以下の通りです。window.closed戻り値：true（ウィンドウが閉じている場合）／ false（ウィンドウが開いている場合）サ