Question

我有一个html页面，其中锚标签代码中有一个图像是：

<a href="www.google.com" id="x"><img src="images/test.png" /></a>

on body onload event我正在调用一个动态更改图像的javascript函数。我的代码是：

<script type="text/javascript">
function changeImage()
{
  document.getElementById('x').innerHTML= '<img src="images/test2.png" />'; 
}
</script>

这在firefox中工作正常，但在谷歌浏览器中没有工作，即。请帮忙..

Answer 1

试试这个：

<a href="www.google.com" id="x"><img id="y" src="images/test.png" /></a>

在js

function changingImg(){
    document.getElementById("y").src="./images/test2.png"
}

在Chrome和IE中测试过。

然后试试这个：[希望<a>的ID可用且至少有一个img标签]

var x = document.getElementById("x");
var imgs = x.getElementsByTagName("img");
imgs[0].src="./images/img02.jpg";

Answer 2

尝试关注而不是更改innerHTML。

function changeImage()
{
  var parent = documeent.getElementById('x');
  parent.getElementsByTagName("img")[0].src = "newUrl";
}

Answer 3

正如其他人所指出的，有很多方法可以做到这一点。 A元素不是锚，它是一个链接。并且没有人真正在网络上使用XHTML，因此摆脱了XML风格的语法。

如果您没有图片的ID，请考虑：

function changeImage(id, src) {

  var image;
  var el = document.getElementById(id);

  if (el) {
    image = el.getElementsByTagName('img')[0];

    if (image) {
      image.src = src;
    }
  }
}

然后你可以使用onload监听器：

<body onload="changeImage('x', 'images/test.png');" ...>

或在链接后添加一个脚本元素（比如在关闭正文标记之前），或者在图像在文档中之后使用其他策略运行函数。

使用javascript添加图像

3 个答案: