JavaScript div 全屏

admin發表於2020-04-12
JavaScript

本文分享一段程式碼例項，利用 HTML5 Fullscreen 實現 div 全屏效果。

更多關於 Fullscreen 內容參閱 Fullscreen 全屏效果 一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant {
  width: 300px; 
  height: 150px; 
  text-align: center;
  line-height: 150px;
  background-color: #ccc;
  font-size: 12px;
  color:green;
  margin: 0 auto;
  cursor: pointer;
}
</style>
<script>
window.onload = ()=> {
  let inFullScreen = false;
  let oDiv = document.getElementById("ant");
  
  oDiv.addEventListener("click", function (evt) {
    if (inFullScreen == false) {
      makeFullScreen(this);
    } else {
      reset();
    }
  }, false);

  function makeFullScreen(divObj) {
    divObj.requestFullscreen();
    inFullScreen = true;
    return;
  }
   
  function reset() {
    document.exitFullscreen();
    inFullScreen = false;
    return;
  }
}
</script>
</head>
<body>
  <div id="ant">螞蟻部落</div>
</body>
</html>

上述程式碼點選 div 可以實現全屏效果，再一次點選可以退出。

程式碼簡單分析如下：

（1）.程式碼沒有考慮相容性問題，因為隨時會變，可以自行查詢。

（2）.點選 div 可以實現全屏效果，再一次點選會退出全屏。

（3）.div 元素會被全屏展示，可以認為其尺寸相對於 window 視口變為 100%。

可能很多時候，我們會要求其內容會居中顯示，下面通過程式碼例項進行一下簡單演示：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant {
  width: 300px; 
  height: 150px; 
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: #ccc;
  margin: 0 auto;
  cursor: pointer;
}
#ant > div {
  width: 100px;
  height: 50px;
  background-color: coral;
}
</style>
<script>
window.onload = ()=> {
  let inFullScreen = false;
  let oDiv = document.getElementById("ant");

  oDiv.addEventListener("click", function (evt) {
    if (inFullScreen == false) {
      makeFullScreen(this);
    } else {
      reset();
    }
  }, false);

  function makeFullScreen(divObj) {
    divObj.requestFullscreen();
    inFullScreen = true;
    return;
  }   
  function reset() {
    document.exitFullscreen();
    inFullScreen = false;
    return;
  }
}
</script>
</head>
<body>
  <div id="ant">
    <div></div>
  </div>
</body>
</html>

div 雖然被全屏顯示，但是它依然是 div ，所以給予它相應的CSS設定即可。

上述程式碼通過 flex 彈性佈局設定其內部的 div 元素垂直居中顯示。

相關文章