devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用9种方法隐藏和显示元素

作者：盐析白兔 | 2024-07-22 11:42:19

赞

踩

使用9种方法隐藏和显示元素

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>使用9种方法隐藏和显示元素</title>
  8.     <style>
  9.         /* 1.使用CSS的display属性 */
  10.         .hidden1 {
  11.             display: none;
  12.         }
  13.  
  14.  
  15.         /* 2.使用CSS的visibility属性 */
  16.         .hidden2 {
  17.             visibility: hidden;
  18.         }
  19.  
  20.  
  21.         /* 3.使用CSS的opacity属性 */
  22.         .hidden3 {
  23.             opacity: 0;
  24.         }
  25.     </style>
  26. </head>
  27.  
  28. <body>
  29.     <!-- 1.使用CSS的display属性隐藏和显示元素 -->
  30.     <button onclick="showElement()">display属性显示元素</button>
  31.     <button onclick="hideElement()">display属性隐藏元素</button>
  32.     <div id="element1" class="hidden1" style="background-color: yellow;">
  33.         <h1>display属性显示/隐藏元素的示例的内容</h1>
  34.         <p>使用CSS的display属性隐藏和显示元素</p>
  35.     </div>
  36.     <hr>
  37.  
  38.  
  39.     <!-- 2.使用CSS的visibility属性隐藏和显示元素 -->
  40.     <button onclick="showElement2()">visibility属性显示元素</button>
  41.     <button onclick="hideElement2()">visibility属性隐藏元素</button>
  42.     <div id="element2" class="hidden2" style="background-color: rgb(255, 153, 0);">
  43.         <h1>visibility属性显示/隐藏元素的示例的内容</h1>
  44.         <p>使用CSS的visibility属性隐藏和显示元素</p>
  45.     </div>
  46.     <hr>
  47.  
  48.  
  49.     <!-- 3.使用CSS的opacity属性隐藏和显示元素 -->
  50.     <button onclick="showElement3()">opacity属性显示元素</button>
  51.     <button onclick="hideElement3()">opacity属性隐藏元素</button>
  52.     <div id="element3" class="hidden3" style="background-color: rgb(0, 153, 255); ">
  53.         <h1>opacity属性显示/隐藏元素的示例的内容</h1>
  54.         <p>使用CSS的opacity属性隐藏和显示元素</p>
  55.     </div>
  56.     <hr>
  57.  
  58.  
  59.     <!-- 4.使用JavaScript直接修改元素的style属性 -->
  60.     <button onclick="showElement4()">JavaScript显示元素</button>
  61.     <button onclick="hideElement4()">JavaScript隐藏元素</button>
  62.     <div id="element4" style="background-color: rgb(255, 255, 0);">
  63.         <h1>JavaScript直接修改元素的style属性显示/隐藏元素的示例的内容</h1>
  64.         <p>使用JavaScript直接修改元素的style属性</p>
  65.     </div>
  66.     <hr>
  67.  
  68.  
  69.     <!-- 5.使用jQuery -->
  70.     <button id="btn1">jQuery显示元素</button>
  71.     <button id="btn2">jQuery隐藏元素</button>
  72.     <div id="element5" style="background-color: rgb(153, 255, 255); ">
  73.         <h1>jQuery显示/隐藏元素的示例的内容</h1>
  74.         <p>使用jQuery隐藏和显示元素</p>
  75.     </div>
  76.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  77.     <hr>
  78.  
  79.  
  80.     <!-- 6.使用JavaScript动画 -->
  81.     <button onclick="showElement5()">JavaScript动画显示元素</button>
  82.     <button onclick="hideElement5()">JavaScript动画隐藏元素</button>
  83.     <div id="element6" style="background-color: rgb(255, 153, 255);">
  84.         <h1>JavaScript动画显示/隐藏元素的示例的内容</h1>
  85.         <p>使用JavaScript动画隐藏和显示元素</p>
  86.     </div>
  87.     <hr>
  88.  
  89.  
  90.     <!-- 7. 使用HTML5的hidden属性-->
  91.     <button onclick="showElement6()">HTML5的hidden属性显示元素</button>
  92.     <button onclick="hideElement6()">HTML5的hidden属性隐藏元素</button>
  93.     <div id="element7" style="background-color: rgb(153, 255, 153);">
  94.         <h1>hidden属性显示/隐藏元素的示例的内容</h1>
  95.         <p>使用HTML5的hidden属性隐藏和显示元素</p>
  96.     </div>
  97.     <hr>
  98.  
  99.  
  100.     <button onclick="showElement71()">显示隐藏的内容</button>
  101.     <button onclick="hideElement71()">hidden隐藏的内容</button>
  102.     <div id="element71" hidden>
  103.         <h1>hidden属性显示/隐藏元素的示例的内容</h1>
  104.         <p>使用HTML5的hidden属性隐藏和显示元素</p>
  105.     </div>
  106.     <hr>
  107.  
  108.  
  109.     <!-- 8.使用HTML5的dialog属性 -->
  110.     <!-- <button onclick="document.getElementById('dialog').showModal()">显示对话框</button> -->
  111.     <!-- 简法： -->
  112.     <button onclick="dialog.showModal()">带有模态的对话框的显示对话框会阻止用户与页面其他部分的交互</button>
  113.     <button onclick="dialog.show()">不带模态的显示对话框</button>
  114.     <dialog id="dialog">
  115.         <h1>dialog元素显示/隐藏元素的示例的内容</h1>
  116.         <p>dialog元素对话框内容</p>
  117.         <!-- <button onclick="document.getElementById('dialog').close()">关闭对话框</button> -->
  118.         <button onclick="dialog.close()">关闭对话框</button>
  119.     </dialog>
  120.     <!-- 用form标签实现关闭对话框 -->
  121.     <button onclick="dialog1.show()">显示带有表单的对话框</button>
  122.     <dialog id="dialog1">
  123.         <form method="dialog">
  124.             <h1>dialog元素显示/隐藏元素的示例的内容</h1>
  125.             <!-- type="submit" 点击提交表单时关闭对话框 -->
  126.             <button type="submit">关闭</button>
  127.         </form>
  128.     </dialog>
  129.  
  130.  
  131.     <hr>
  132.     <!-- 9.使用HTML5的details元素 -->
  133.     <div id="element9" style="background-color: rgb(153, 153, 255);">
  134.         <h1>details元素显示/隐藏元素的示例的内容</h1>
  135.         <p>使用HTML5的details元素隐藏和显示元素</p>
  136.         <details>
  137.             <summary>点击查看详情</summary>
  138.             <p>详情内容</p>
  139.             <p>details元素隐藏和显示元素</p>
  140.         </details>
  141.     </div>
  142.     <hr>
  143.  
  144.  
  145.     <script>
  146.         /* 1.使用CSS的display属性 */
  147.         // 显示元素
  148.         function showElement() {
  149.             document.getElementById('element1').classList.remove('hidden1');
  150.         }
  151.         // 隐藏元素
  152.         function hideElement() {
  153.             document.getElementById('element1').classList.add('hidden1');
  154.         }
  155.  
  156.  
  157.         /* 2.使用CSS的visibility属性 */
  158.         // 显示元素
  159.         function showElement2() {
  160.             document.getElementById('element2').classList.remove('hidden2');
  161.         }
  162.         // 隐藏元素
  163.         function hideElement2() {
  164.             document.getElementById('element2').classList.add('hidden2');
  165.         }
  166.  
  167.  
  168.         /* 3.使用CSS的opacity属性 */
  169.         // 显示元素
  170.         function showElement3() {
  171.             document.getElementById('element3').classList.remove('hidden3');
  172.         }
  173.         // 隐藏元素
  174.         function hideElement3() {
  175.             document.getElementById('element3').classList.add('hidden3');
  176.         }
  177.  
  178.  
  179.         /* 4.使用JavaScript直接修改元素的style属性 */
  180.         // 显示元素
  181.         function showElement4() {
  182.             document.getElementById('element4').style.display = 'block';
  183.         }
  184.         // 隐藏元素
  185.         function hideElement4() {
  186.             document.getElementById('element4').style.display = 'none';
  187.         }
  188.  
  189.  
  190.         /* 5.使用jQuery */
  191.         // 显示元素
  192.         $('#btn1').click(function () {
  193.             $('#element5').show();
  194.         });
  195.         // 隐藏元素
  196.         $('#btn2').click(function () {
  197.             $('#element5').hide();
  198.         });
  199.  
  200.  
  201.         /* 6.使用JavaScript动画 */
  202.         // 显示元素
  203.         function showElement5() {
  204.             document.getElementById('element6').style.opacity = 1;
  205.         }
  206.         // 隐藏元素
  207.         function hideElement5() {
  208.             document.getElementById('element6').style.opacity = 0;
  209.         }
  210.  
  211.  
  212.         /* 7.使用HTML5的hidden属性 */
  213.         // 显示元素
  214.         function showElement6() {
  215.             document.getElementById('element7').hidden = false;
  216.         }
  217.         // 隐藏元素
  218.         function hideElement6() {
  219.             document.getElementById('element7').hidden = true;
  220.         }
  221.  
  222.         
  223.         /* 71.使用HTML5的hidden属性 */
  224.         // 显示元素
  225.         function showElement71() {
  226.             document.getElementById('element71').removeAttribute('hidden');
  227.         }
  228.         function hideElement71() {
  229.             document.getElementById('element71').setAttribute('hidden', 'hidden');
  230.         }
  231.     </script>
  232. </body>
  233.  
  234. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/865009
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号