替换图像元素的src属性值

Question

我试图替换图像源，但前提是图像与现有类“概述-图标-停机时间”相对应。还有另一个类，“概述-图标-降级”，我想用它代替它(或者简单地放置一个图像地址，这可能会更容易)。

待替换：

<div class="page__overview">
<img class="page__overview-icon overview-icon--downtime" src="downtime_large.png">
</div>

代之以：

<div class="page__overview">
<img class="page__overview-icon page__overview-icon--degraded" src="degraded_large.png">
</div>

我在想这件事，但我不确定我是不是在朝正确的方向前进。

document.querySelector(".page__overview-icon overview-icon--downtime").setAttribute("img", "page__overview-icon page__overview-icon--degraded");

图像加载页面，所以我还需要在最后使用AJAX。

这里有什么想法吗？提前谢谢！

Answer 1

你朝正确的方向前进了。

属性是标记内部的东西。在这个例子中，"class“和"src”是img元素的属性。

document.querySelector将选择img元素，然后需要调用setAttribute(' class '，新的类值)和setAttribute(' src '，新的src值)。