为什么更改图像onclick不能在PC上本地工作?

时间:2014-12-21 22:58:43

标签: javascript

我有这个小测试文件,当图像在服务器上时工作正常。 但是当我的电脑上的图像是本地图像时,它不起作用。 (.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>

1 个答案:

答案 0 :(得分:1)

问题

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

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

在你的第一个例子中:

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

URIsrc 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

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

   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);

解决方案

您所寻找的只是源属性的价值,而不是完整的源本身。如果您只希望获得vanilla JavaScript中元素的属性,可以使用getAttribute 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";
       }
  }