<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用9种方法隐藏和显示元素</title>
<style>
/* 1.使用CSS的display属性 */
.hidden1 {
display: none;
}
/* 2.使用CSS的visibility属性 */
.hidden2 {
visibility: hidden;
}
/* 3.使用CSS的opacity属性 */
.hidden3 {
opacity: 0;
}
</style>
</head>
<body>
<!-- 1.使用CSS的display属性隐藏和显示元素 -->
<button onclick="showElement()">display属性显示元素</button>
<button onclick="hideElement()">display属性隐藏元素</button>
<div id="element1" class="hidden1" style="background-color: yellow;">
<h1>display属性显示/隐藏元素的示例的内容</h1>
<p>使用CSS的display属性隐藏和显示元素</p>
</div>
<hr>
<!-- 2.使用CSS的visibility属性隐藏和显示元素 -->
<button onclick="showElement2()">visibility属性显示元素</button>
<button onclick="hideElement2()">visibility属性隐藏元素</button>
<div id="element2" class="hidden2" style="background-color: rgb(255, 153, 0);">
<h1>visibility属性显示/隐藏元素的示例的内容</h1>
<p>使用CSS的visibility属性隐藏和显示元素</p>
</div>
<hr>
<!-- 3.使用CSS的opacity属性隐藏和显示元素 -->
<button onclick="showElement3()">opacity属性显示元素</button>
<button onclick="hideElement3()">opacity属性隐藏元素</button>
<div id="element3" class="hidden3" style="background-color: rgb(0, 153, 255); ">
<h1>opacity属性显示/隐藏元素的示例的内容</h1>
<p>使用CSS的opacity属性隐藏和显示元素</p>
</div>
<hr>
<!-- 4.使用JavaScript直接修改元素的style属性 -->
<button onclick="showElement4()">JavaScript显示元素</button>
<button onclick="hideElement4()">JavaScript隐藏元素</button>
<div id="element4" style="background-color: rgb(255, 255, 0);">
<h1>JavaScript直接修改元素的style属性显示/隐藏元素的示例的内容</h1>
<p>使用JavaScript直接修改元素的style属性</p>
</div>
<hr>
<!-- 5.使用jQuery -->
<button id="btn1">jQuery显示元素</button>
<button id="btn2">jQuery隐藏元素</button>
<div id="element5" style="background-color: rgb(153, 255, 255); ">
<h1>jQuery显示/隐藏元素的示例的内容</h1>
<p>使用jQuery隐藏和显示元素</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<hr>
<!-- 6.使用JavaScript动画 -->
<button onclick="showElement5()">JavaScript动画显示元素</button>
<button onclick="hideElement5()">JavaScript动画隐藏元素</button>
<div id="element6" style="background-color: rgb(255, 153, 255);">
<h1>JavaScript动画显示/隐藏元素的示例的内容</h1>
<p>使用JavaScript动画隐藏和显示元素</p>
</div>
<hr>
<!-- 7. 使用HTML5的hidden属性-->
<button onclick="showElement6()">HTML5的hidden属性显示元素</button>
<button onclick="hideElement6()">HTML5的hidden属性隐藏元素</button>
<div id="element7" style="background-color: rgb(153, 255, 153);">
<h1>hidden属性显示/隐藏元素的示例的内容</h1>
<p>使用HTML5的hidden属性隐藏和显示元素</p>
</div>
<hr>
<button onclick="showElement71()">显示隐藏的内容</button>
<button onclick="hideElement71()">hidden隐藏的内容</button>
<div id="element71" hidden>
<h1>hidden属性显示/隐藏元素的示例的内容</h1>
<p>使用HTML5的hidden属性隐藏和显示元素</p>
</div>
<hr>
<!-- 8.使用HTML5的dialog属性 -->
<!-- <button onclick="document.getElementById('dialog').showModal()">显示对话框</button> -->
<!-- 简法： -->
<button onclick="dialog.showModal()">带有模态的对话框的显示对话框会阻止用户与页面其他部分的交互</button>
<button onclick="dialog.show()">不带模态的显示对话框</button>
<dialog id="dialog">
<h1>dialog元素显示/隐藏元素的示例的内容</h1>
<p>dialog元素对话框内容</p>
<!-- <button onclick="document.getElementById('dialog').close()">关闭对话框</button> -->
<button onclick="dialog.close()">关闭对话框</button>
</dialog>
<!-- 用form标签实现关闭对话框 -->
<button onclick="dialog1.show()">显示带有表单的对话框</button>
<dialog id="dialog1">
<form method="dialog">
<h1>dialog元素显示/隐藏元素的示例的内容</h1>
<!-- type="submit" 点击提交表单时关闭对话框 -->
<button type="submit">关闭</button>
</form>
</dialog>
<hr>
<!-- 9.使用HTML5的details元素 -->
<div id="element9" style="background-color: rgb(153, 153, 255);">
<h1>details元素显示/隐藏元素的示例的内容</h1>
<p>使用HTML5的details元素隐藏和显示元素</p>
<details>
<summary>点击查看详情</summary>
<p>详情内容</p>
<p>details元素隐藏和显示元素</p>
</details>
</div>
<hr>
<script>
/* 1.使用CSS的display属性 */
// 显示元素
function showElement() {
document.getElementById('element1').classList.remove('hidden1');
}
// 隐藏元素
function hideElement() {
document.getElementById('element1').classList.add('hidden1');
}
/* 2.使用CSS的visibility属性 */
// 显示元素
function showElement2() {
document.getElementById('element2').classList.remove('hidden2');
}
// 隐藏元素
function hideElement2() {
document.getElementById('element2').classList.add('hidden2');
}
/* 3.使用CSS的opacity属性 */
// 显示元素
function showElement3() {
document.getElementById('element3').classList.remove('hidden3');
}
// 隐藏元素
function hideElement3() {
document.getElementById('element3').classList.add('hidden3');
}
/* 4.使用JavaScript直接修改元素的style属性 */
// 显示元素
function showElement4() {
document.getElementById('element4').style.display = 'block';
}
// 隐藏元素
function hideElement4() {
document.getElementById('element4').style.display = 'none';
}
/* 5.使用jQuery */
// 显示元素
$('#btn1').click(function () {
$('#element5').show();
});
// 隐藏元素
$('#btn2').click(function () {
$('#element5').hide();
});
/* 6.使用JavaScript动画 */
// 显示元素
function showElement5() {
document.getElementById('element6').style.opacity = 1;
}
// 隐藏元素
function hideElement5() {
document.getElementById('element6').style.opacity = 0;
}
/* 7.使用HTML5的hidden属性 */
// 显示元素
function showElement6() {
document.getElementById('element7').hidden = false;
}
// 隐藏元素
function hideElement6() {
document.getElementById('element7').hidden = true;
}
/* 71.使用HTML5的hidden属性 */
// 显示元素
function showElement71() {
document.getElementById('element71').removeAttribute('hidden');
}
function hideElement71() {
document.getElementById('element71').setAttribute('hidden', 'hidden');
}
</script>
</body>
</html>
