HTML 实现 点击按钮切换 整张界面 && 点击按钮切换局部界面
warning:
这篇文章距离上次修改已过433天，其中的内容可能已经有所变动。
在HTML中实现点击按钮切换整张屏幕和局部屏幕，可以使用JavaScript来控制元素的显示和隐藏。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle Screen</title>
<script>
function toggleFullScreen() {
var elem = document.body; // 整个屏幕
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
function togglePartialScreen() {
var elem = document.getElementById('partialScreen'); // 局部屏幕元素
if (elem.style.display === 'none') {
elem.style.display = 'block';
} else {
elem.style.display = 'none';
}
}
</script>
</head>
<body>
<button onclick="toggleFullScreen()">切换整张屏幕</button>
<button onclick="togglePartialScreen()">切换局部屏幕</button>
<div id="partialScreen" style="display:none;">
<!-- 局部屏幕内容 -->
局部屏幕内容
</div>
</body>
</html>在这个示例中，toggleFullScreen 函数会将浏览器当前页面全屏显示，而 togglePartialScreen 函数会切换一个ID为 partialScreen 的元素的显示状态。这个元素在HTML中被设置为隐藏（display: none），当用户点击切换局部屏幕的按钮时，它会显示出来。
评论已关闭