如何使用 JavaScript 显示/隐藏或切换 DIV 元素

灰太狼 2023-09-28 08:17 34阅读 0赞

在 jQuery 中，您可以使用 .toggle() 方法来切换元素，任何元素。但是，如果您正在寻找纯 JavaScript 解决方案，那么这里就是。我在这里分享一个简单的代码，它展示了使用 JavaScript 切换或显示/隐藏 DIV 元素是多么容易。

**相关：** [使用 jQuery 基于下拉选择切换 DIV 元素][jQuery _ DIV]

<div> 元素通常用作容器，它还会包含许多其他元素，[例如 form][form]。您可能希望在满足某些条件时显示或隐藏 <div> 元素。

这是一个常见的场景。我希望在按钮单击时切换 <div> 元素。

**标记和脚本**

<html>
    <head>
        <title>Toggle example using Pure JavaScript</title>
    </head>
    <body>
        <p>
        	<input type="button" value="Show DIV" id="bt" onclick="toggle(this)">
        </p>
    
        
        <div style="border:solid 1px #ddd; padding:10px; display:none;" id="cont">
            <div>
                <label>Name:</label>
                <div><input id="name" name="yourname" /></div>
            </div>
            <div>
                <label>Age:</label>
                <div><input name="age" id="yourage" /></div></div>
            <div>
                <label>Additional Information (optional):</label>
                <div><textarea style="width:100%;" rows="5" cols="46"></textarea></div>
            </div>
        </div>
    </body>
    <script>
        function toggle(ele) {
            var cont = document.getElementById('cont');
            if (cont.style.display == 'block') {
                cont.style.display = 'none';
    
                document.getElementById(ele.id).value = 'Show DIV';
            }
            else {
                cont.style.display = 'block';
                document.getElementById(ele.id).value = 'Hide DIV';
            }
        }
    </script>
    </html>

*试试看*

JS 代码中的一个简单的 if-else条件就可以解决问题。在上面的示例中，我正在更改按钮单击时元素的显示属性。[您可以使用三元运算符][Link 1]  
  
进一步简化上述代码。例如，

*试试看*

我[也在 Angular 中分享了一个类似的例子][Angular]。

不仅在按钮单击时，您还可以根据其他条件更改元素的可见性，例如在有人选择或取消选择[SELECT 下拉列表][SELECT]中的值时切换 <div> 元素等。

谢谢阅读。☺

[jQuery _ DIV]: https://www.encodedna.com/javascript/toggle-div-based-on-dropdown-list-selection-using-javascript-or-jquery.htm#toggle_ele_jquery
[form]: https://www.encodedna.com/javascript/how-to-save-form-data-in-a-text-file-using-javascript.htm
[Link 1]: https://www.encodedna.com/javascript/operators/ternary-operator-in-javascript.htm
[Angular]: https://www.encodedna.com/angular/how-to-show-hide-or-toggle-elements-in-angular-4.htm
[SELECT]: https://www.encodedna.com/javascript/toggle-div-based-on-dropdown-list-selection-using-javascript-or-jquery.htm