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

最新推荐文章于 2023-10-13 10:06:45 发布

allway2

最新推荐文章于 2023-10-13 10:06:45 发布

阅读量2.9k

点赞数 2

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/allway2/article/details/125008431

版权

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

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

<div> 元素通常用作容器，它还会包含许多其他元素，例如 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>

    <!--The DIV element to toggle visibility. Its "display" property is set as "none". -->
    <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条件就可以解决问题。在上面的示例中，我正在更改按钮单击时元素的显示属性。您可以使用三元运算符

进一步简化上述代码。例如，

<script>
    function toggle(ele) {
        var cont = document.getElementById('cont');
        cont.style.display = cont.style.display == 'none' ? 'block' : 'none';
    }
</html>

试试看

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

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

谢谢阅读。☺

allway2

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
如何使用 JavaScript 显示/隐藏或切换 DIV 元素

在 jQuery 中，您可以使用 .toggle() 方法来切换元素，任何元素。但是，如果您正在寻找纯 JavaScript 解决方案，那么这里就是。我在这里分享一个简单的代码，它展示了使用 JavaScript 切换或显示/隐藏 DIV 元素是多么容易。相关：使用 jQuery 基于下拉选择切换 DIV 元素<div> 元素通常用作容器，它还会包含许多其他元素，例如 form。您可能希望在满足某些条件时显示或隐藏 <div> 元素。这是一个常见的场景。我希望在按钮.
复制链接

扫一扫