HTML DOM 实例点击灯泡开/关灯

最新推荐文章于 2024-09-09 15:56:10 发布

Blocking The Sky

最新推荐文章于 2024-09-09 15:56:10 发布

阅读量871

点赞数 3

分类专栏： html 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_44925547/article/details/114681117

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>