JavaScript点击灯亮灯灭(动态变化/图片替换)

此代码仅供参考

---

代码说明

本例会动态地改变HTML的的来源(src)，从而实现点击灯泡就可以打开或关闭这盏灯。事实上，JavaScript能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。转自W3School

---

html代码

<script> function changeImage() { element = document.getElementById('myimage'); //查找id为myimage的元素 if (element.src.match("bulbon")) { //判断图片链接中是否包含"bulbon"，即灯亮的图片链接所包含的特定字符 element.src = "http://www.w3school.com.cn/i/eg_bulboff.gif"; //图片链接将被替换，此时灯亮的图片变成灯灭的图片 } else { element.src = "http://www.w3school.com.cn/i/eg_bulbon.gif"; //灯灭的图片被替换成灯亮的图片 } } </script> <div style="background:#fff;margin:5px 10px;border-radius:10px;"> <img id="myimage" onclick="changeImage()" src="http://www.w3school.com.cn/i/eg_bulboff.gif"><br><br> 点击灯泡来点亮或熄灭这盏灯</div>

---

代码演示

---

---