JavaScript案例（二）：显示与隐藏

最新推荐文章于 2024-03-06 09:53:52 发布

@彼岸花

最新推荐文章于 2024-03-06 09:53:52 发布

阅读量265

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVA开发文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44825185/article/details/115179438

JAVA开发专栏收录该内容

34 篇文章

订阅专栏

这段代码演示了如何使用JavaScript实现点击按钮控制图片的显示与隐藏。通过获取元素、设置display属性和改变按钮文字实现交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示和隐藏</title>
    <script>
        window.onload = function () {
            var btn = document.getElementById("btn");
            var img = document.getElementsByTagName("img")[0];
            var flag = true;
            btn.onclick = function () {
                if(flag){
                    img.style.display = "none";
                    btn.innerHTML = "显示";
                    flag = false;
                }else{
                    img.style.display = "block";
                    btn.innerHTML = "隐藏";
                    flag = true;
                }

            }
        }
    </script>
</head>
<body>
    <img src="./image/girl.jpg" alt=""><br>
    <button id="btn">隐藏</button>
</body>
</html>