我想使用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>

I have created one div class called "content" and inside that content div there are five divs generated using php for loop. I want to change the divs "foo" background color to light green which is achieved already, but my concern is how to change the background color property again to white?

Answer 1

Extending the Lahiru TM approach

Try using this, so that it will toggle the color on click

<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

You can try below approach for that,

<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

It is advisable to use the CSS class then of a class property.

You can do something like this

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

define CSS for preToggle and postToggle.