Question

如何以编程方式更改以下结构中的以下img？

  <div id="runner" class="nav brand pull-left">
        <a alt="motherboard" href="/tree/">
            <img alt="mega node" src="img.png"></img>
        </a>
  </div>

firefox指向我

#runner > a:nth-child(1) > img:nth-child(1)

我已尝试使用标准方法，具有各种命名惯例

document.getElementById("#runner").src="icon.png";
document.getElementById("#runner.a.img").src="icon.png";
document.getElementById("#runner.img").src="icon.png";
document.getElementById("mega node").src="icon.png";

我甚至尝试过无用的CSS，

div#runner {
    content:url("img.png");
}

Answer 1

您正在以错误的方式在getElementById()中指定参数，您应该只提供id，而不选择#。您可以找到#runner div，然后在其中找到第一个<img>标记并更改其src属性：

  document.getElementById('runner').querySelector('img').src = 'icon.png'

Example

甚至更简单，不使用getElementById()：

 document.querySelector('#runner a img').src = 'icon.png'

Example

更改嵌套alt标记中的img

1 个答案: