首页 前端知识 如何使用 JavaScript 显示/隐藏或切换 DIV 元素

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

2024-05-09 11:05:52 前端知识 前端哥 193 904 我要收藏

在 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> 元素等。

谢谢阅读。☺

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7715.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!