通过单击元素更改元素的背景答案

【问题标题】：change element's background by clicking on element通过单击元素更改元素的背景
【发布时间】：2012-04-21 07:22:44
【问题描述】：

我想写一个非常简单的脚本，需要一些帮助。这是我希望脚本执行的操作。默认情况下，有一个没有背景颜色的 div 元素。当您单击此 div 时，它需要填充红色背景色。然后，当您再次单击此 div 时，它应该又没有背景了。

CSS 代码如下：

 <head>
<style type="text/css">

    #red,#green,#blue,#black{
        width:200px;
        height:100px;
        margin-bottom:25px;
        border:solid red 1px;
    }

</style>

HTML 和一些 JS 代码：

 <body>

    <div id='red'></div>


        <script type="text/javascript">
        <!--

            var x = document.getElementById('red');

                x.onclick = function(){

                    x.style.backgroundColor = 'red';

        }

        //-->
        </script>

【问题讨论】：

标签： onclick getelementbyid

【解决方案1】：

对于 JavaScript，只需单击一下红色即可工作，然后将其恢复为空：

var clicked = false, 
    x = document.getElementById('red');

x.onclick = function(){
    x.style.backgroundColor = clicked ? 'transparent' : 'red';
    clicked = true;
};

【讨论】：