使用javasript和html更改图像的状态

Question

请问我能否在下面获取有关此JavaScript代码和html的帮助，请尝试使用javascript更改灯泡的状态，以便当我单击打开按钮时，灯泡将变为黄色，而当我单击关闭按钮，灯泡将变成白色，实际上我不是我做错了。

function turnOn() {
      let changeState = document.querySelector('.img');
      changeState.src = "lightbulb.png";
      changeState.style.color = "yellow";
}

function turnOff() {
    let turnOff = document.querySelector('.img');
     turnOff.src = "lightbulb.png";
     turnOff.style.color = 'white';
}


<button class="turn-on" onclick="turnOn();">Turn On</button>
<img  src="lightbulb.png" alt="" width="200" class="img">
<button class="turn-off" onclick="turnOff();">Turn Off</button>

Answer 1

您无法使用style.color更改图像中灯泡的颜色。

创建两个单独的图像-一个用于“打开”，一个用于“关闭”，然后修改changeState.src行以指向正确的文件。

您可以删除style.color行。

应该可以。

PS：如果将图像另存为SVG个图像，则可以通过编程方式更改它们的状态，但这通常比仅创建两个图像要复杂得多。