`if` 无法检查 <img> src 的值答案

【问题标题】：`if` fails to check value of an <img> src`if` 无法检查 <img> src 的值
【发布时间】：2015-11-05 06:52:16
【问题描述】：

我不明白我的代码有什么问题。 if 在这种情况下似乎不起作用。当人们点击按钮时，我希望图像发生变化。有人可以帮帮我吗？

<body>

<div>
    <img id="en_garde" src="gifattaque/gif1.png">
</div>
<br>
<button onclick=attaque_animation() type="button">Attaque</button>


<script>
    function attaque_animation() {
        if (document.getElementById("en_garde").src=="gifattaque/gif1.png") {
            document.getElementById("en_garde").src="gifattaque/gif2.png";

        }


    };
</script>
</body>
</html>

【问题讨论】：

引用属性值是否有效？ (onclick="attaque...()")
尝试console.log(document.getElementById("en_garde").src) 看看.src 属性解析为什么
您可能缺少位置 hostname 和 protocol 即图像的绝对 URL (yourdomain.com/file/gifattaque/gif1.png)。所以尝试将其添加到图片路径中，然后进行比较。
如果您编写了有效的 HTML，这可能会有所帮助。

标签： javascript image if-statement src

【解决方案1】：

src 属性将扩展为完整图像源（包括 http://...），因此与您要查找的值不完全匹配。

你最好检查一下属性的end：

if (document.getElementById("en_garde").src.match(/gifattaque\/gif1\.png$/))
  document.getElementById("en_garde").src = "gifattaque/gif2.png";

【讨论】：

【解决方案2】：

选择你可以使用的元素：

document.querySelector('[src$="gif1.png"]')

它将检查以“gif1.png”结尾的 src attr。

var el = document.querySelector('[src$="gif1.png"]');
   
if (el)
el.src="gifattaque/gif2.png";

console.log(el)

【讨论】：