JavaScript替换图像源

Question

我想要在不改变网页的HTML和命名结构的情况下改变src标签的内容。

目前我的代码大概长这样：

....

<div class="main">
    <button>
        <img src="image/placeHolder.png"/>
        <div>the nothing</div>
    </button>
</div>

我需要更改这个img标签的src属性，目前我的JavaScript代码如下：

<script type="text/javascript">

function changeSource() {

    var image = document.querySelectorAll("img");
    var source = image.getAttribute("src").replace("placeHolder.png", "01.png");
    image.setAttribute("src", source);
}

changeSource();

</script>

我不知道为什么它不能工作，但我希望有人能解决它 :D

- TheLovelySausage

---

这些翅膀是什么？ - ɹɐqʞɐ zoɹǝɟ

顺便说一下，我使用了^而不是</>，因为编辑器总是将其转换为HTML。 - TheLovelySausage

0_0 不知怎么的，我的翅膀消失了。 - TheLovelySausage

编辑器中有一个“代码示例”按钮，您可以使用它来格式化代码片段。我更新了您的问题并删除了多余的内容。 :) - Brandon Boone

document.querySelectorAll() 返回 NodeList，你需要使用 querySelector 或者直接访问第一个（或任何其他）元素，例如 image[0]。 - Ilya I

Answer 1

将您的函数更改为：

function changeSource() {
    var image = document.querySelectorAll("img")[0];
    var source = image.src = image.src.replace("placeholder.png","01.png");
}
changeSource();

querySelectorAll 返回一个数组。我通过 [0] 取了第一个。

但是你应该使用 document.getElementById('这里是图片的id') 来定位到特定的 <img>

如果你想定位到所有具有 placeholder.png 的 <img>。

function changeSourceAll() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        if (images[i].src.indexOf('placeholder.png') !== -1) {
            images[i].src = images[i].src.replace("placeholder.png", "01.png");
        }
    }
}
changeSourceAll();

- Amit Joki

---

但是图片的src是image/placeholder.png，它将被更改为：01.png，应该是image/01.png。 - Al.G.

使用 document.getElementById('图像的ID')。 - Amit Joki

你想对每张图片都这样做吗？ - Amit Joki

所以 document.querySelectorAll("img")["all?"] - TheLovelySausage

你的解决方案的新版本运行得非常完美，虽然我稍微缩短了它的长度以便能够处理多张图片。 - TheLovelySausage

Answer 2

function changeSource() {
   var img = document.getElementsByTagName('img')[0];
   img.setAttribute('src', img.getAttribute('src').replace("placeHolder.png", "image.png"));
}

- Al.G.

---

这是一种有趣的使用get/setAttribute的方式，我之前不知道 :D 我很可能会使用这个，非常感谢。 - TheLovelySausage