:fullscreen 偽類選擇器

admin發表於2019-02-25

此選擇器匹配當前處於全屏顯示模式的元素。

特別說明：此選擇器當前處於實驗狀態，不建議使用。

語法結構:

[CSS] 純文字檢視 複製程式碼
:fullscreen

瀏覽器相容:

（1）.IE11瀏覽器支援此選擇器（:-ms-fullscreen）。

（2）.Edge瀏覽器支援此選擇器（:fullscreen）。

（3）.谷歌瀏覽器支援此選擇器（:-webkit-full-screen）。

（4）.火狐瀏覽器支援此選擇器（:-moz-full-screen）。

（5）.Opera瀏覽器不支援此選擇器。

（6）.Safari瀏覽器支援此選擇器（:-webkit-full-screen）。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.fullScreen {
  width: 600px; 
  height: 350px; 
  text-align:center;
  line-height:350px;
}
div {
  background-color: green;
}

div:-webkit-full-screen {
  background-color: pink;
}

div:-moz-full-screen {
  background-color: pink;
}

div:-ms-fullscreen {
  background-color: pink;
}

div:fullscreen {
  background-color: pink;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var inFullScreen = false;

  var fsClass = document.getElementsByClassName("fullScreen");
  for (var i = 0; i < fsClass.length; i++) {
    fsClass[i].addEventListener("click", function (evt) {
      if (inFullScreen == false) {
        makeFullScreen(evt.target);
      } else {
        reset();
      }
    }, false);
  }
  

  function makeFullScreen(divObj) {
    if (divObj.requestFullscreen) {
      divObj.requestFullscreen();
    }
    else if (divObj.msRequestFullscreen) {
      divObj.msRequestFullscreen();
    }
    else if (divObj.mozRequestFullScreen) {
      divObj.mozRequestFullScreen();
    }
    else if (divObj.webkitRequestFullscreen) {
      divObj.webkitRequestFullscreen();
    }
    inFullScreen = true;
    return;
  }

  function reset() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
    inFullScreen = false;
    return;
  }
}
</script>
</head>
<body>
<div  class="fullScreen">螞蟻部落</div>
</body>
</html>

切換div是否全屏狀態，可以控制它的背景顏色的改變。

相關文章