js控制div或者图片的隐藏或者展现

最新推荐文章于 2023-04-19 14:38:23 发布

小李USER

最新推荐文章于 2023-04-19 14:38:23 发布

阅读量1.2k

点赞数

分类专栏：待整理文章标签： css css3 html javascript 前端

本文链接：https://blog.csdn.net/m0_59110131/article/details/128055827

版权

待整理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

案例1：

当我们在操作div的时候，可以进行删除里面的样式，和添加里面的样式属性等，具体需要有一些逻辑吧！

实例代码：

<body>
    <button id="btn">隐藏Div</button><br>
    <!-- 内联样式，开发中尽量不要这么写，当然特别为难的时候，或者测试的时候也可以写一下 -->
    <div id="box" style="width: 300px;height: 300px;background-color: green;"></div>

    <script>
        // 获取到button按钮和id为box的div
        var box = document.getElementById("box");
        var btn = document.getElementById("btn");

        var isShow = true; //定义变量，经常我们会这么写
        btn.onclick = function () { //定义点击按钮的函数，作用是点击事件后会触发的事情
            if (isShow) { //如果正确，也是默认进入选择语句
                box.setAttribute("hidden", true);
                // this.innerHTML = "显示Div"; 
                btn.innerHTML = "显示Div";
                isShow = false; //进入后变为false，永远循环，永远触发事件
            } else {
                box.removeAttribute("hidden");
                // 两个方法，随意选择
                // this.innerHTML = "隐藏div";
                btn.innerHTML = "隐藏div";
                isShow = true;
            }
        }
    </script>
</body>

效果展示：

案例2：

注意点：我们点击一下事件就进行一次，显示和隐藏一共是两次事件，所以我们需要把flag定义为全局变量，放在点击事件的外面。

实例代码：

<body>
    <button id="btn">隐藏图片</button><br>
    <img src="../../images/1.jpg" alt="" id="imgUrl" width="300px" height="300px">
    <script>
        var btn = document.getElementById("btn");
        var imgUrl = document.getElementById("imgUrl");
        var flag = 1;
        btn.onclick = function () {
            if (flag === 1) {
                imgUrl.setAttribute("hidden", "true");
                this.innerHTML = "展示图片";
                flag = 0;
            } else if (flag === 0) {
                imgUrl.removeAttribute("hidden");
                btn.innerHTML = "隐藏图片";
                flag = 1;
            }
        }
    </script>
</body>

效果展示：