js实现两张图片来回切换

最新推荐文章于 2024-06-27 12:49:37 发布

我妈已经三天没打我了

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量3.5k

点赞数 3

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_61710685/article/details/123468646

版权

JavaScript 图片切换 onclick事件 src属性 HTML

关键词由CSDN通过智能技术生成

html css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

点击张图片A，另一张图片B显示（这时A图片隐藏），

再次点击B图片，A图片显示（这时B图片隐藏）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现点击图片切换为另一图片，再次点击恢复到原图片</title>
</head>
<body>

    <div id="button">
        <img id="picts" src="./images/bg_yellow.png" alt="">
    </div>

    <script>

        function change_pic(){
            var button = document.getElementById("button");

            var picts = document.getElementById("picts");

            button.onclick = function(){
                if(picts.getAttribute("src",2) == "./images/bg_yellow.png"){

                    picts.setAttribute("src","./images/bg_card.png");

                }else{

                    picts.setAttribute("src","./images/bg_yellow.png");

                };
            }
        }
        change_pic();

    </script>

</body>
</html>