简介
在本实验中,我们将探索如何使用:fullscreen
CSS 伪元素选择器,在元素处于全屏模式时为其应用样式。我们将使用Element.requestFullscreen()
创建一个按钮,以使元素进入全屏模式,用于预览样式。完成本实验后,你将更好地理解如何使用 CSS 创建具有自定义样式的全屏元素。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将探索如何使用:fullscreen
CSS 伪元素选择器,在元素处于全屏模式时为其应用样式。我们将使用Element.requestFullscreen()
创建一个按钮,以使元素进入全屏模式,用于预览样式。完成本实验后,你将更好地理解如何使用 CSS 创建具有自定义样式的全屏元素。
虚拟机中已经提供了index.html
和style.css
。
要对处于全屏模式的元素设置样式,你可以使用:fullscreen
CSS 伪元素选择器。你还可以创建一个按钮,通过<button>
和Element.requestFullscreen()
使元素进入全屏模式以进行预览。以下是一个示例代码:
<div class="container">
<p>
<em>点击下方按钮可使元素进入全屏模式。</em>
</p>
<div class="element" id="element">
<p>我在全屏模式下会改变颜色!</p>
</div>
<br />
<button
onclick="var el = document.getElementById('element'); el.requestFullscreen();"
>
进入全屏!
</button>
</div>
.container {
margin: 40px auto;
max-width: 700px;
}
.element {
padding: 20px;
height: 300px;
width: 100%;
background-color: skyblue;
box-sizing: border-box;
}
.element p {
text-align: center;
color: white;
font-size: 3em;
}
/* 针对 Internet Explorer */
.element:-ms-fullscreen p {
visibility: visible;
}
/* 针对现代浏览器 */
.element:fullscreen {
background-color: #e4708a;
width: 100vw;
height: 100vh;
}
请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后,你可以刷新“Web 8080”标签页来预览网页。
恭喜你!你已完成“全屏”实验。你可以在 LabEx 中练习更多实验以提升你的技能。