DOM

この例では、fullscreenchange イベントのハンドラーは、 ID が fullscreen-div である要素に追加されます。

ユーザーが "Toggle Fullscreen Mode" ボタンをクリックすると、click ハンドラーが div の全画面モードを切り替えます。もし document.fullscreenElement に値があれば、全画面モードを終了します。そうでなければ、div は全画面モードに移行します。

fullscreenchange イベントが処理されたとき、要素の状態はすでに変化していることを思い出してください。よって、全画面モードへ変化した場合は、document.fullscreenElement が全画面モードになった要素を指します。一方、document.fullscreenElement が null の場合は、全画面モードが取り消されています。

すなわち、この例のコードでは、要素が現在全画面モードである場合、fullscreenchange ハンドラーはコンソールへ全画面の要素の id をログ出力します。document.fullscreenElement が null の場合は、このコードは全画面モードが終了した旨をログ出力します。

HTML：

<h1>fullscreenchange event example</h1>
<div id="fullscreen-div">
  <button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
</div>

JavaScript：

document.getElementById('fullscreen-div').addEventListener('fullscreenchange', (event) => {
  // document.fullscreenElement は、フルスクリーン モードの要素があればそれを指します。そうでない場合は、プロパティの値は null です。
  if (document.fullscreenElement) {
    console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
  } else {
    console.log('Leaving full-screen mode.');
  }
});

document.getElementById('toggle-fullscreen').addEventListener('click', (event) => {
  if (document.fullscreenElement) {
    // exitFullscreen is only available on the Document object.
    document.exitFullscreen();
  } else {
    document.getElementById('fullscreen-div').requestFullscreen();
  }
});

HTML：

<SPAN id=IdTest style="color:black; background-color:#fee; font-size:30px">[SPAN要素]</SPAN><BR>
<SPAN id=IdLog></SPAN><BR>

JavaScript：

function Job(eve){ //全画面モードチェンジイベント処理：
  D=eve; //＝[object]：[object Event]
詳細
	//isTrusted＝[boolean]：true
	//type＝[string]：fullscreenchange
	//target＝[object]：[object HTMLSpanElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：false
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…

  if(document.fullscreenElement){ //全画面モードになった？、
    DA=document.fullscreenElement; //＝[object]：[object HTMLSpanElement]
詳細
	//title＝[string]：
	//lang＝[string]：
	//translate＝[boolean]：true
	//dir＝[string]：
	//hidden＝[boolean]：false
	//accessKey＝[string]：
	//draggable＝[boolean]：false
	//spellcheck＝[boolean]：true
	//textprediction＝[boolean]：true
	//autocapitalize＝[string]：
	//contentEditable＝[string]：inherit
	//enterKeyHint＝[string]：
	//isContentEditable＝[boolean]：false
	//inputMode＝[string]：
	//offsetParent＝[object]：[object HTMLBodyElement]
	//offsetTop＝[number]：2324
	//offsetLeft＝[number]：32
	//offsetWidth＝[number]：163
	//offsetHeight＝[number]：30
	//innerText＝[string]：[SPAN要素]
	//…

    IdLog.innerHTML=document.fullscreenElement.id;
  }else{	//　いいえ：
    IdLog.innerHTML="全画面モードは終了しました。";
  }
}
IdTest.onfullscreenchange=Job;

↓これを実行して全画面にする。

IdTest.requestFullscreen();

document.fullscreenElement。