点击按钮实现全屏div放大

HTML

<div id="fullscreen-div">
  这里是全屏后显示的内容。
  <button id="fullscreen-button">全屏</button>
</div>

JS代码

document.getElementById('fullscreen-button').addEventListener('click', function() {
  var div = document.getElementById('fullscreen-div');
  
  if (div.requestFullscreen) {
    div.requestFullscreen();
  } else if (div.mozRequestFullScreen) { /* Firefox */
    div.mozRequestFullScreen();
  } else if (div.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    div.webkitRequestFullscreen();
  } else if (div.msRequestFullscreen) { /* IE/Edge */
    div.msRequestFullscreen();
  }
});
 
// 监听全屏状态的改变
document.addEventListener('fullscreenchange', function() {
  if (!document.fullscreenElement) {
    console.log('已退出全屏');
  } else {
    console.log('已进入全屏');
  }
}, false);
 
document.addEventListener('mozfullscreenchange', function() {
  if (!document.mozFullScreenElement) {
    console.log('已退出全屏');
  } else {
    console.log('已进入全屏');
  }
}, false);
 
document.addEventListener('webkitfullscreenchange', function() {
  if (!document.webkitFullscreenElement) {
    console.log('已退出全屏');
  } else {
    console.log('已进入全屏');
  }
}, false);
 
document.addEventListener('msfullscreenchange', function() {
  if (!document.msFullscreenElement) {
    console.log('已退出全屏');
  } else {
    console.log('已进入全屏');
  }
}, false);