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>

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

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>

Answer 2

您可以尝试以下方法，

<script>
var foo= document.getElementsByClassName('foo');
for (var i = 0; i < foo.length; i++) {
    foo[i].addEventListener("click", function(e){
        if (e.style.backgroundColor) {
            e.style.backgroundColor = "null";
        } else {
            e.style.backgroundColor = "lightgreen";
        }
    });
}
</script>

Answer 3

建议先使用CSS类，然后再使用class属性。

您可以这样做

    <div class="content">
         <?php
           for ($i=0; $i < 5; $i++) {
              echo '<div id="i" class="preToggle" (click)="divClicked($event , i)">test
               </div>';
           }
         ?>
    </div>
    <script>
    divClicked(event , i){
        var foo= document.getElementById(i);
        foo.className = foo.className.replace("preToggle", "postToggle");
}
    </script>

为preToggle和postToggle定义CSS。

我想使用JavaScript切换CSS属性

3 个答案: