我做了一个2个按钮，运行2个功能来改变图像的源到一个不同的。这工作正常，但每当我改变源的图像稍微向左移动，并回到正常后，改变源与第二个按钮回到第一个图像。
function bulbon() {
if (document.getElementById("lightbulb").src = "mini_mini_pngwing.com.png") {
(document.getElementById("lightbulb").src = "mini_lightbulbon.png");
}
}
function bulboff() {
if (document.getElementById("lightbulb").src = "mini_lightbulbon.png") {
(document.getElementById("lightbulb").src = "mini_mini_pngwing.com.png");
}
}.lightbulb {
position: fixed;
height: 10%;
width: 50%;
display: block;
margin: auto;
left: 650px;
top: 125px;
}<body>
<div class="lightbulb">
<img id="lightbulb" src="mini_mini_pngwing.com.png">
</div>
<div class="button">
<button id="button" type="button" onclick="bulbon()">Turn On</button>
<button id="button2" type="button" onclick="bulboff()">Turn Off</button>
</div>
</body>我试着用两个按钮做一个简单的网站。其中一个按钮可以打开灯泡，另一个按钮可以关闭灯泡。但是由于某种原因，每当按下第一个按钮时，灯泡的位置就会发生变化，一旦按下第二个按钮，灯泡的位置就会恢复正常。
1条答案
按热度按时间iq3niunx1#
我试着在我的电脑上编程，遇到了同样的问题。然后我把灯泡图像作为两个层放入gimp，发现它们没有正确重叠。你可能遇到了完全相同的问题。我发送了两张正确显示它的图像。它们是从https://freesvg.org/1434619451的公共领域图像创建的。
light bulb on image的
light bulb off image的