TAG
JavaScript
Result
Run
License
<div class="container"><button type="button" id="btn-fullscreen">Full screen</button></div>
window.addEventListener("load", () => { const elBtn = document.getElementById("btn-fullscreen"); const elWrap = elBtn.parentElement; elBtn.addEventListener("click", e => { let promise = e.currentTarget.parentElement.requestFullscreen(); promise.then(() => { elWrap.addEventListener("fullscreenchange", e => { let elTargetStyle = e.currentTarget.style; elTargetStyle.display = "flex"; elTargetStyle.justifyContent = "center"; elTargetStyle.alignItems = "center"; let btn = e.currentTarget.children[0]; if(document.fullscreen) { btn.textContent = "Close full screen"; btn.addEventListener("click", e => { document.exitFullscreen(); }, { once: true } ); } else { btn.textContent = "Full screen"; elTargetStyle.display = "block"; } }); }, () => { elWrap.addEventListener("fullscreenerror", e => { alert("전체 화면 모드로 전환할 수 없습니다."); }); }); }); });
Console
expand_less
License
License
by DevDic
Close