javascript - 为什么更改图像 onclick 在电脑上本地不起作用？

Question

我有这个小测试脚本，当图像位于服务器上时它可以正常工作。 但当图像位于我的电脑本地时，它不起作用。 (.html 和图像当然在同一文件夹中)

<img alt="" src="http://www.mywebsite.nl/images/markwhite.png" id="imgClickAndChange" onclick="changeImage()"  />

<script>

 function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "http://www.mywebsite.nl/images/markwhite.png") 
    {
        document.getElementById("imgClickAndChange").src = "http://www.mywebsite.nl/images/markgreen.png";
    }
    else 
    {
        document.getElementById("imgClickAndChange").src = "http://www.mywebsite.nl/images/markwhite.png";
    }
} 
</script>

因此，当在我的桌面上进行本地测试时，它不起作用。有人可以向我解释一下吗？

<img alt="" src="markwhite.png" id="imgClickAndChange" onclick="changeImage()"  />

<script>

function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "markwhite.png") 
    {
        document.getElementById("imgClickAndChange").src = "markgreen.png";
    }
    else 
    {
        document.getElementById("imgClickAndChange").src = "markwhite.png";
    }
}
</script>

Answer 1

问题

您要求的是图像的实际完整 URI，而不是存储在 src 中的值。 attribute image的标签本身。

它适用于您的第一个(服务器端)示例，因为 URI 的值和 src 中的值属性恰好相同。

在第一个示例中:

src="http://www.mywebsite.nl/images/markwhite.png"

两者都是URI和 src attribute将是:http://www.mywebsite.nl/images/markwhite.png .

但是，在第二个示例中:

src="markwhite.png"

源 (URI) 不仅仅是文件名 markwhite.png ，而是文件系统的完整路径。例如，在 Unix 上:/home/user/me/photos/markwhite.png ，或在 Windows 上:c:\web\photos\markwhite.png .

您可以通过添加一些调试来简单地验证这一点。 添加一个简单的console.log到你的 JavaScript:

   function changeImage() {
      if (document.getElementById("imgClickAndChange").src == "markwhite.png") 
        console.log(document.getElementById("imgClickAndChange").src);
       {
         document.getElementById("imgClickAndChange").src = "markgreen.png";
       }
      else 
       {
         document.getElementById("imgClickAndChange").src = "markwhite.png";
       }
  }

所在行:

console.log(document.getElementById("imgClickAndChange").src);

将完整的源代码输出到您的浏览器 JavaScript 控制台中。即使是简单的alert ，而不是 console.log 也足够了:

alert(document.getElementById("imgClickAndChange").src);

解决方案

您正在寻找的只是源属性的值，而不是完整的源本身。如果您只想获取普通 JavaScript 中元素的属性，您可以使用 getAttribute setter/getter 。根据您的情况，更改您的 .src进入.getAttribute('src') .

因此，这个修改后的脚本就可以解决问题:

   function changeImage() {
      if (document.getElementById("imgClickAndChange").getAttribute(src) == "markwhite.png") 
       {
         document.getElementById("imgClickAndChange").src = "markgreen.png";
       }
      else 
       {
         document.getElementById("imgClickAndChange").src = "markwhite.png";
       }
  }