<!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>
![[算法题]重排字符串](https://i-blog.csdnimg.cn/direct/ddadc06c6e89481dbcf921e89e6950b5.png)
