JavaScript - フルスクリーンモードを切り替えるボタン

JavaScriptでフルスクリーンモードを切り替えるボタンを実装する方法とコード例を作成しています。

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

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

フルスクリーンモードの切り替えるボタンのクリックイベントをaddEventListener()で作成しています。

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

document.documentElement.requestFullscreen()にてフルスクリーンモードを有効にします。
document.exitFullscreen()はフルスクリーンモードをオフにします。

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