原生js实现点击按钮显示/隐藏图片

目录结构：代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-wid

想做一只快乐的修狗

6212人浏览 · 2022-02-26 19:13:24

想做一只快乐的修狗 · 2022-02-26 19:13:24 发布

目录结构：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示和隐藏图片</title>
</head>
<body>
    <button id="btn" style="margin-left: 230px;">隐藏</button>
</br>
    <img style="margin-top: 10px;" src="./images/img01.jpg" width="500px" height="300px"> 
    <script>
        // 1.获取事件源
        var btn = document.getElementById("btn");
        var img = document.getElementsByTagName("img")[0];
        // var isShow = true;
        // 2.绑定事件
        btn.onclick = function() {
            // 3. 事件驱动程序
            if(btn.innerHTML === "隐藏"){
                img.style.display = "none";
                btn.innerHTML = "显示";
                // isShow = false;
            } else {
                img.style.display = "block";
                btn.innerHTML = "隐藏";
                // isShow = true;
            }
        }
    </script>
</body>
</html>

样式：