如何用js实现点击图片切换为另一图片，再次点击恢复到原图片

最新推荐文章于 2022-03-13 23:08:19 发布

蓝色清晨_

最新推荐文章于 2022-03-13 23:08:19 发布

阅读量3.7w

点赞数 20

分类专栏： javascript

本文链接：https://blog.csdn.net/yingleiming/article/details/79895453

版权

javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

如何用js实现点击图片切换为另一图片，再次点击恢复到原图片

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

    <div id="button">
        <img id="picts" src="../images/angels.jpg" 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/angels.jpg"){

                    picts.setAttribute("src","../images/attrach.jpg");

                }else{

                    picts.setAttribute("src","../images/angels.jpg");

                };
            }
        }
        change_pic();

    </script>

</body>
</html>

拓展知识

对于一个img元素，我们想获取它的src属性时可以有两种方式：

1、xxx.getAttribute(“src”)

2、直接通过xxx.src获取属性值

在src的属性值为相对路径时，这两者的结果在不同浏览器会有一些不同哦。

以此为例：

var img=document.getElementById('logo');
alert("src:"+img.src);
//  iE7-:  src:http://localhost/test/images/logo.png
//  iE8+ Chrome Firefox:  src:http://localhost/test/images/logo.png

alert("getAttribute:"+img.getAttribute("src"));
//  iE7-:  src:http://localhost/test/images/logo.png
//  iE8+ Chrome Firefox:getAttribute:images/logo.png

那么如何让IE低版本的getAttribute(“src”)方法也返回相对路径呢，这里就要用到IE特有的getAttribute方法的第二个参数：

img.getAttribute("src",2)

除了img的src属性外，a标签的href属性也存在此问题，同样设置第二个参数为2即可。
0：默认值。搜索属性时大小写不敏感

1：搜索属性时大小写敏感，大小和小写字母必须完全匹配。

2：返回BSTR形式的属性值？此标识对事件属性无效。（不知道第一句的具体意义，但是设置属性为2可以用来返回原始值）

4：返回完整路径URL地址。只对URL属性有效。（参数为4的情况，我还没有找到使用它的场景…）
tu

蓝色清晨_

关注

20
点赞
踩
66

收藏

觉得还不错? 一键收藏
8
评论
如何用js实现点击图片切换为另一图片，再次点击恢复到原图片

如何用js实现点击图片切换为另一图片，再次点击恢复到原图片&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;如何用js实现点击图片切换为另一图片，再次点击恢复到原图片&lt;/title&gt;&am
复制链接

扫一扫

专栏目录