CSS :fullscreen 选择器 详解
css3基础 2023-07-22 16:42:24小码哥的IT人生shichen
CSS :fullscreen 选择器
实例
如果页面位于全屏模式，把背景色设置为黄色：
:fullscreen { background-color: yellow; }
完整实例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Safari 语法 */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 语法 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard 语法 */
:fullscreen {
background-color: yellow;
}
/* 设置按钮的样式 */
button {
padding: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>全屏模式</h1>
<p>单击“打开全屏模式”按钮以全屏模式打开此页面。通过单击键盘上的“Esc”键或使用“关闭全屏模式”按钮将其关闭。</p>
<button onclick="openFullscreen();">打开全屏模式</button>
<button onclick="closeFullscreen();">关闭全屏模式</button>
<script>
// 使用 JavaScript 在全屏模式中打开页面
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
<p>注释：Internet Explorer 10 以及更早的版本不支持全面模式。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
:fullscreen 选择器用于选取处于全屏模式的元素。
浏览器支持
表格中的数字注明了完全支持该选择器的首个浏览器版本。
| 选择器 | |||||
|---|---|---|---|---|---|
| :fullscreen | 71.0 15.0 -webkit- |
12.0 11.0 -ms- |
64.0 9.0 -moz- |
3.1 -webkit- | 58.0 15.0 -webkit- |
CSS 语法
:fullscreen {
css declarations;
}相关页面
CSS 教程：CSS 伪类
