Javascript 使用CSS单击按钮时无法更改图像_Javascript_Html_Css_Raspberry Pi3_Gpio

Javascript 使用CSS单击按钮时无法更改图像

javascript html css

Javascript 使用CSS单击按钮时无法更改图像,javascript,html,css,raspberry-pi3,gpio,Javascript,Html,Css,Raspberry Pi3,Gpio,我正在使用Raspberry Pi开发网络控制的家庭自动化。我在链接中引用了以下内容但我正在定制HTML、CSS页面。我开发了如下HTML页面 <body> <h1 align=center>Web Based Controlled Home Automation using Raspberry Pi </h1> <div id="content" align="center"></div> <cen

我正在使用Raspberry Pi开发网络控制的家庭自动化。我在链接中引用了以下内容

但我正在定制HTML、CSS页面。我开发了如下HTML页面

<body>
    <h1 align=center>Web Based Controlled Home Automation using Raspberry Pi </h1>

    <div id="content" align="center"></div>
    <center><img src="/img/roomlighton.jpeg" height="500px" width="800px" id='pic1' /></center>
    <br / >

button {
                    display: block;
                    position: absolute;
                    margin: 40px 610px;
                    padding: 0 10px;
                    text-align: center;
                    text-decoration: none;
                    width: 130px;
                    height: 40px;
                    font: bold 18px/25px Arial, sans-serif;                 
                    color: black;


                text-shadow: 1px 1px 1px rgba(255,255,255, .22);
                -webkit-border-radius: 30px;
                -moz-border-radius: 30px;
                border-radius: 30px;

                -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
                -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
                box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

                -webkit-transition: all 0.15s ease;
                -moz-transition: all 0.15s ease;
                -o-transition: all 0.15s ease;
                -ms-transition: all 0.15s ease;
                transition: all 0.15s ease;
        }

#gpio4.LOW {
                    background-color: Gray;
                    color: Black;
                    // background-image:url('/img/roomlightoff.png');
            }

            #gpio4.HIGH {
                    background-color: Red;
                    color: LightGray;
            }

我的css文件如下

<body>
    <h1 align=center>Web Based Controlled Home Automation using Raspberry Pi </h1>

    <div id="content" align="center"></div>
    <center><img src="/img/roomlighton.jpeg" height="500px" width="800px" id='pic1' /></center>
    <br / >

button {
                    display: block;
                    position: absolute;
                    margin: 40px 610px;
                    padding: 0 10px;
                    text-align: center;
                    text-decoration: none;
                    width: 130px;
                    height: 40px;
                    font: bold 18px/25px Arial, sans-serif;                 
                    color: black;


                text-shadow: 1px 1px 1px rgba(255,255,255, .22);
                -webkit-border-radius: 30px;
                -moz-border-radius: 30px;
                border-radius: 30px;

                -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
                -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
                box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

                -webkit-transition: all 0.15s ease;
                -moz-transition: all 0.15s ease;
                -o-transition: all 0.15s ease;
                -ms-transition: all 0.15s ease;
                transition: all 0.15s ease;
        }

#gpio4.LOW {
                    background-color: Gray;
                    color: Black;
                    // background-image:url('/img/roomlightoff.png');
            }

            #gpio4.HIGH {
                    background-color: Red;
                    color: LightGray;
            }

很好用。目前，当我点击按钮（#gpio.HIGH/#gpio.LOW）时，背景颜色会相应地改变。但问题是，我还想同时更改图像源。单击按钮时，我想同时更改

背景图像

源。现在，页面显示一个恒定的图像

我尝试了

背景图像：url（'/img/roomlightoff.png'）
但它不工作，它改变了按钮的背景图像，而不是页面
请帮助解决此问题。
您可以将javascript添加到问题中吗？尝试将“$（'content'）更改为“$（button）”。在js中单击…。我更改为$（'button'），它可以工作。但它会永久更改图像。我希望，当按钮点击（#GPIO4.HIGH）时，它会显示一个图像（例如lighton.jpg），而当按钮点击（#GPIO4.LOW）时，它会显示另一个图像（例如lightoff.jpg）。当前，当我加载页面时，它会显示lighton.jpg图像，当我点击按钮时，它会永久替换lightoff.jpg图像。