Javascript 替换图像源

Question

我正在尝试更改网页中 src 标记的内容(不更改 HTML/命名结构)

我的代码现在看起来像这样:

....

<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

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 of img here')针对特定的 <img>

如果你想定位所有<img>有 placeholder.png .

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