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

时间：2025-03-29 21:19:36

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

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

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

    <script>

        function change_pic(){
            var button = ("button");

            var picts = ("picts");

             = function(){
                if(("src",2) == "../images/"){

                    ("src","../images/");

                }else{

                    ("src","../images/");

                };
            }
        }
        change_pic();

    </script>

</body>
</html>

拓展知识

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

1、(“src”)

2、直接通过获取属性值

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

以此为例：

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

alert("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

相关文章