在 HTML 上的两个图像之间切换

Question

这个问题在某些方面与已经存在的其他问题有点相似，但也有其独特之处。

我的最终目标是有一个能够在图像和文本之间切换的开/关开关。 例如，在“ON”State 中，按钮会显示一个绿色圆圈和文字“Your app is running”。 在“关闭”State 中，按钮会显示一个红色圆圈和文字“Your app is off”。

关于如何 go 这样做的任何建议？ 理想情况下，我希望使用 HTML、CSS 和 Javascript 的组合。

Answer 1

这就是你可以做的。 只需创建一个按钮并更改其样式和文本。

 function myFunction() { const button = document.getElementById('myButton'); if (button.innerHTML === 'Turn on') { button.innerHTML = 'Turn Off'; button.style.backgroundColor = 'green'; } else { button.innerHTML = 'Turn on'; button.style.backgroundColor = 'red'; } }

 #myButton { width: 100px; height: 100px; border-radius: 50%; border-color: none; background-color: red; }

 <button id="myButton" onClick='myFunction()'>Turn on</button>

Answer 2

对不起，我不确定你的目标是什么。 如果我理解正确，我想你可以在没有 JavaScript 的情况下做到这一点。 该技术称为 CSS 图像精灵。

• CSS 图像精灵 - W3Schools