js-图片的隐藏与显示

最新推荐文章于 2022-02-26 19:13:24 发布

HadwinLing

最新推荐文章于 2022-02-26 19:13:24 发布

阅读量832

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Alingyuzi/article/details/104804631

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">隐藏</button>
<p></p>
<img src="img/img_01.jpg" alt="">

<script>
    window.onload = function () {
        // 1. 获取事件源和相关的元素
        var btn = document.getElementById("btn");
        var img = document.getElementsByTagName("img")[0];

        // 2.绑定事件
        btn.onclick = function () {
            // 3. 事件的驱动程序
            if(btn.innerText === "隐藏"){
                img.style.display = "none";
                btn.innerText = "显示";
            }else {
                img.style.display = "block";
                btn.innerText = "隐藏";
            }
        }
    }
</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HadwinLing

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js-图片的隐藏与显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><button id="btn">隐藏</button><p>...
复制链接

扫一扫