CSS :fullscreen 选择器


实例

如果页面位于全屏模式,把背景色设置为黄色:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. /* Safari 语法 */
  7. :-webkit-full-screen {
  8. background-color: yellow;
  9. }
  10. /* IE11 语法 */
  11. :-ms-fullscreen {
  12. background-color: yellow;
  13. }
  14. /* Standard 语法 */
  15. :fullscreen {
  16. background-color: yellow;
  17. }
  18. /* 设置按钮的样式 */
  19. button {
  20. padding: 20px;
  21. font-size: 20px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <h2>全屏模式</h2>
  27. <p>单击“打开全屏模式”按钮以全屏模式打开此页面。通过单击键盘上的“Esc”键或使用“关闭全屏模式”按钮将其关闭。</p>
  28. <button onclick="openFullscreen();">打开全屏模式</button>
  29. <button onclick="closeFullscreen();">关闭全屏模式</button>
  30. <script>
  31. // 使用 JavaScript 在全屏模式中打开页面
  32. var elem = document.documentElement;
  33. function openFullscreen() {
  34. if (elem.requestFullscreen) {
  35. elem.requestFullscreen();
  36. } else if (elem.webkitRequestFullscreen) { /* Safari */
  37. elem.webkitRequestFullscreen();
  38. } else if (elem.msRequestFullscreen) { /* IE11 */
  39. elem.msRequestFullscreen();
  40. }
  41. }
  42. function closeFullscreen() {
  43. if (document.exitFullscreen) {
  44. document.exitFullscreen();
  45. } else if (document.webkitExitFullscreen) { /* Safari */
  46. document.webkitExitFullscreen();
  47. } else if (document.msExitFullscreen) { /* IE11 */
  48. document.msExitFullscreen();
  49. }
  50. }
  51. </script>
  52. <p>注释:Internet Explorer 10 以及更早的版本不支持全面模式。</p>
  53. </body>
  54. </html>

定义和用法

:fullscreen 选择器用于选取处于全屏模式的元素。


浏览器支持

表格中的数字注明了完全支持该选择器的首个浏览器版本。

选择器
:fullscreen71.015.0 -webkit-12.011.0 -ms-64.09.0 -moz-3.1 -webkit-58.015.0 -webkit-

CSS 语法

  1. :fullscreen {
  2. css declarations;
  3. }

相关页面

CSS 教程:CSS 伪类

分类导航