javascript - 我想使用 javascript 切换 CSS 属性

Question

<div class="content">
          <?php
            for ($i=0; $i < 5; $i++) {
              echo '<div class="foo">
              </div>';
            }
          ?>
          <script>
            var foo= document.getElementsByClassName('foo');
            for (var i = 0; i < foo.length; i++) {
              foo[i].addEventListener("click", function(){
                this.style.backgroundColor = "lightgreen";
                });
            }
          </script>

我创建了一个名为“内容”的 div 类，在该内容 div 中，有五个使用 php for 循环生成的 div。我想将 div“foo”背景颜色更改为已经实现的浅绿色，但我关心的是如何将背景颜色属性再次更改为白色？

标签： javascripthtmlcsstoggle

Answer 1

扩展 Lahiru TM 方法

尝试使用它，这样它会在点击时切换颜色

<div class="content">
     <?php
       for ($i=0; $i < 5; $i++) {
          echo '<div class="foo">test
           </div>';
       }
     ?>
</div>
<script>
var foo= document.getElementsByClassName('foo');
for (var i = 0; i < foo.length; i++) {
    foo[i].addEventListener("click", function(e){
        if (this.style.backgroundColor == 'lightgreen') {
            this.style.backgroundColor = "white";
        } else {
            this.style.backgroundColor = "lightgreen";
        }
    });
}
</script>