js图片显示隐藏

最新推荐文章于 2023-04-12 22:36:22 发布

宋发元

最新推荐文章于 2023-04-12 22:36:22 发布

阅读量1w

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u011019141/article/details/77369639

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js图片显示隐藏</title>
    <script>
        window.onload = function () {
            //获取按钮
            var btn = document.getElementsByTagName("input")[0];
            //获取图片
            var img = document.getElementsByTagName("img")[0];
            //给按钮添加事件
            btn.onclick = function () {
                //点击按钮隐藏图片 或者显示图片
                //改变按钮的文字
                //如果是隐藏，就改成显示，如果是显示就改成隐藏
                //图片的处理 ：如果按钮文字是显示，图片显示出来，否则隐藏
                if (btn.value == "显示"){
                    btn.value = "隐藏";
                    img.style.display = "block";
                }else {
                    btn.value = "显示";
                    img.style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
    <img src="image/0.jpg"/>
    <br/>
    <input type="button" value="隐藏"/>
</body>
</html>

宋发元

关注

2
点赞
踩
6

收藏

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

js图片显示隐藏 window.onload = function () { //获取按钮 var btn = document.getElementsByTagName("input")[0]; //获取图片 var img = document.getElementsByT
复制链接

扫一扫