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

Answer 2

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

Javascript替换图像源

2 个答案: