<!DOCTYPE html>
<html>
<head>
<title>按Shift键控制元素显示与隐藏</title>
<style>
#myElement {
display: none;
padding: 20px;
background-color: lightblue;
color: black;
}
</style>
</head>
<body>
<h1>按Shift键控制元素显示与隐藏</h1>
<p>按下 Shift 键来切换下面元素的可见性:</p>
<div id="myElement">
这是要控制可见性的元素。
</div>
<script>
// HTML元素
var element = document.getElementById("myElement");
// 键盘按键事件监听器
document.addEventListener("keydown", function(event) {
// 按下 Shift 键 (event.shiftKey为 true) 时切换元素的可见性
if (event.shiftKey) {
toggleVisibility(element);
}
});
// 切换元素的可见性函数
function toggleVisibility(element) {
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
</script>
</body>
</html>