webApi小案例一：点击按钮实现图片切换

最新推荐文章于 2024-07-26 20:46:33 发布

秃头桑

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量586

点赞数 1

分类专栏： api小案例文章标签： javascript css css3 html html5

本文链接：https://blog.csdn.net/qq_45052409/article/details/107450058

版权

api小案例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 <title>Document</title>
    <style>
        img {
            width: 600px;
        }
    </style>
</head>

<body>
    <button id="lf">蒙奇D路飞</button>
    <button id="sl">诺诺罗亚索隆</button>
    <div>
        <img src="images/timg (1).jpg" alt="" title="蒙奇D路飞">
    </div>

    <script>
        // 修改元素属性  src
        // 1.获取元素
        var lf = document.getElementById('lf');
        var sl = document.getElementById('sl');
        var img = document.querySelector('img');
        // 2.注册事件  处理程序
        sl.onclick = function () {
            img.src = 'images/timg.jpg';
            img.title = '诺诺罗亚索隆';
        }
        lf.onclick = function () {
            img.src = 'images/timg (1).jpg';
            img.title = '蒙奇D路飞';
        }

    </script>
</body>

由于秃头桑的知识能力有限，如果有写的不对的地方，还请各位大佬批评指正，各位小伙伴如果有什么想和秃头桑说的欢迎在下方留言哦。

秃头桑

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
webApi小案例一：点击按钮实现图片切换

<title>Document</title> <style> img { width: 600px; } </style></head><body> <button id="lf">蒙奇D路飞</button> <button id="sl">诺诺罗亚索隆</button> <d.
复制链接

扫一扫