[分享]css动态隐藏显示出来

CSS动态隐藏和显示是一种很有用的功能，可以在页面上实现一些不同寻常的效果。下面就来介绍一下这种功能的实现方法。代码如下： .hidden { display: none; } function to...

CSS动态隐藏和显示是一种很有用的功能，可以在页面上实现一些不同寻常的效果。下面就来介绍一下这种功能的实现方法。

代码如下：
<style>
    .hidden {
        display: none;
    }
</style>
<script>
    function toggleHidden() {
        var div = document.getElementById("myDiv");
        if (div.classList.contains("hidden")) {
            div.classList.remove("hidden");
        } else {
            div.classList.add("hidden");
        }
    }
</script> 

以上是实现隐藏和显示的代码，其中的 .hidden 类有一个 display:none 属性，可以实现隐藏。而在 JavaScript 中，通过 classList 可以方便地对元素的 class 进行添加和删除。

接下来，我们可以将以上代码应用在实际的页面中，呈现出一个按钮来控制一个 div 的隐藏与显示。

代码如下：
<button onclick="toggleHidden()">toggle hidden div</button>
<div id="myDiv" class="hidden">
    Hello, world!
</div> 

使用以上代码，我们就可以看到一个按钮和一个带有 .hidden 类的 div。点击按钮后， JavaScript 程序会判断 div 是否已经添加了 .hidden 类，如果是，则删除该类，否则添加该类。这样就可以轻松地实现 div 的隐藏和显示。

以上就是关于 CSS 动态隐藏和显示的简单介绍。希望这篇文章可以帮助你更好地理解这个功能的实现方法。如有疑问，请随时在评论区留言。