JavaScript实现简单的元素显示和隐藏

最新推荐文章于 2024-11-26 00:00:00 发布

原创最新推荐文章于 2024-11-26 00:00:00 发布 · 5.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了两种使用JavaScript实现网页元素显示与隐藏的方法：一是直接通过修改元素的display属性；二是改变元素的类名来间接控制display属性。

隐藏：display:none;

显示：display:block;

方法一：设置display样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="box"><img src="1.jpg" alt=""></div>

<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        var box=document.getElementById("box");
        if(this.value=="隐藏"){
            box.style.display="none";
            this.value="显示";
        } else if(this.value=="显示"){
            box.style.display="block";
            this.value="隐藏";
        }
    }
</script>
</body>
</html>

方法二：通过类样式设置元素的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dv{
            display:none;
        }
    </style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="box"><img src="1.jpg" alt=""></div>

<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        var box=document.getElementById("box");
        if(box.className != "dv"){
            box.className = "dv";
            this.value="显示";
        } else if(box.className = "dv"){
            box.className = "";
            this.value="隐藏";
        }
    }
</script>
</body>
</html>

在JavaScript代码中，DOM操作设置类样式的时候，用className