JavaScript - フルスクリーンモードの状態を検出する

JavaScriptでフルスクリーンモードの状態を検出する方法とコード例を作成しています。

HTMLには、フルスクリーンモードを切り替えるボタン要素にid名「full-screen-btn」、状態を表示する用の要素にid名「output」を指定ています。

<button type="button" id="full-screen-btn">Full Screen Mode</button>
<p id="output">False</p>

フルスクリーンモードの状態の変更をトリガーにしたイベントはaddEventListener()で「fullscreenchange」を指定する事で作成可能です。

現在のフルスクリーンモードの状態は「document.fullscreenElement」で取得します。
「document.fullscreenElement」はフルスクリーンモードの場合は「true」、そうでない場合は「false」を返します。

// フルスクリーンモードの切り替えボタン
document.querySelector('#full-screen-btn').addEventListener('click', function () {
	// 現在の状態を取得して切り替える
	if (!document.fullscreenElement) {
		document.documentElement.requestFullscreen();
	} else {
		document.exitFullscreen();
	}
}, false);


// フルスクリーンモードの切り替えを検出するイベント
document.addEventListener('fullscreenchange', () => {
	// フルスクリーンモードかどうか
	if (document.fullscreenElement) {
		document.querySelector('#output').textContent = 'True';
	} else {
		document.querySelector('#output').textContent = 'False';
	}
}, false);