我们知道通过JS是可以修改图片的路径的,有多种方法可以修改处理。然而最近通过JS来修改图片的src路径时却怎么也不生效。小编把过程记载下来以方便日后少走弯路。

js修改图片路径src属性为什么不生效

小编先把img添加了一个id名,然后通过js控制图片的src来直接修改改,可奇怪了,无效!经过查询搜索,小编修改过下面的几种方法。

1、考虑到是缓存问题,修改的图片元素地址加了随机时间,如 Date.now(),也不生效。

2、节点位置不同的问题,于是把图片的节点位置放到了 js处理函数的前面,结果还是不生效。

3、函数后加return false,小编用的是a标记来做的点击,看网友说的 a href="javascript:changeImgUrl()" 这种的会在IE6下无效,于是改成 href="javascript:void(0)" onclilck="changeImgUrl();return false;" 还是不生效。

最后都怀疑人生了,于是改成JQ来处理,结果还是一样,突然间用浏览器F12键进入开发者模式时,查看源代码,却突然发现因为引用了 swiper-wrapper 这个插件,源代码生成的竟然有三个相同的id名的 img,这时才恍然大悟。于是把 id 改成 name,通过处理相同name的方式修改成功。

总结:js开发时,尽量在开发者模式下查看浏览器运行生成的网站源代码里面分析。只单单在代码里有时会忽略一些其它的元素。