javascript (js)通过button按钮实现盒子的显示和隐藏

最新推荐文章于 2023-04-03 20:29:10 发布

前端日记_林

最新推荐文章于 2023-04-03 20:29:10 发布

阅读量1.1w

点赞数 6

分类专栏：前端Web开发文章标签： javascript html css 内容显示与隐藏

本文链接：https://blog.csdn.net/qq_42159062/article/details/88728247

版权

前端Web开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前奏：无论是实现div或其他内容的显示和隐藏，原理都差不多

效果图：

点击隐藏后隐藏盒子，同时隐藏按钮的值修改为显示。点击显示后盒子又将显示，显示按钮的值修改为隐藏，如图：

完整代码如下（代码详解）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div盒子css样式——区分*/
        div {
            height: 150px; //高度150px
            width: 150px;  //宽度150px
            background-color: yellow; //盒子颜色yellow
        }
    </style>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<div id="dv"></div>

<script>
    //通过button按钮的id获取点击事件
    document.getElementById("btn").onclick = function () {
        //使用if判断，判断button按钮的value属性
        if (this.value === "隐藏") {
            // 如果是隐藏，那么点击后通过div盒子的id修改css样式，将display属性值改为none
            document.getElementById("dv").style.display = "none";
            //this关键字获取的是当前对象  通过this关键字来修改button的value值
            this.value = "显示";
        } else if (this.value === "显示") {
            // 如果是显示，那么点击后通过div盒子的id修改css样式，将display属性值改为block
            document.getElementById("dv").style.display = "block";
            //this关键字获取的是当前对象  通过this关键字来修改button的value值
            this.value = "隐藏";
        }
    };
</script>
</body>
</html>

文字叙述不太严谨，请包容

如有问题，欢迎留言指出，谢谢

前端日记_林

关注

6
点赞
踩
22

收藏

觉得还不错? 一键收藏
8
评论
javascript (js)通过button按钮实现盒子的显示和隐藏

前奏：无论是实现div或其他内容的显示和隐藏，原理都差不多效果图：点击隐藏后隐藏盒子，同时隐藏按钮的值修改为显示。点击显示后盒子又将显示，显示按钮的值修改为隐藏，如图：完整代码如下（代码详解）：<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫