<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制灯泡开/关</title>
</head>
<body>
<script>
function change_iamge() {
element = document.getElementById("myimage")
//点击改变灯泡状态(开/关)
if(element.src.match("on"))
{
element.src = "image/light_off.png"
document.getElementsByTagName('p').item(0).innerHTML = '灯泡状态:关';
document.getElementsByTagName('p').item(0).style.color = ' black'
}
else
{
element.src = "image/light_on.png"
document.getElementsByTagName('p').item(0).innerHTML = '灯泡状态:开';
document.getElementsByTagName('p').item(0).style.color = '#f4ea2a'
}
}
</script>
<div align="center">
<img id="myimage" onclick="change_iamge()" src="image/light_off.png" width="200" height="200" border="0">
<p style="font-size: 50px">灯泡状态:关</p>
</div>
</body>
</html>
HTML DOM instance click the light bulb to turn on/off the light
Guess you like
Origin blog.csdn.net/weixin_44925547/article/details/114681117
Recommended
Ranking