<div>
  <button>Change Color</button>
</div>

<div class="container">
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
<div class="card purple"></div>  
</div>

.card {
  width:100px;
  height: 120px;
  margin: 10px;
  display:inline-block;
}

.purple { background: #dd11dd; }
.orange { background: orange; }

.c-purple .card {
  background: #dd11dd;
}

.c-orange .card {
 background: orange; 
}
var btn = document.querySelector('button');

btn.addEventListener('click', function() {
  var divs = document.querySelectorAll('.card');
  for ( var i=0; i < divs.length; i++ ) {
    divs[i].classList.toggle('purple');
    divs[i].classList.toggle('orange');
  }
});


/*
btn.addEventListener('click', function() {
  var c = document.querySelector('.container');
  c.classList.toggle('c-purple');
  c.classList.toggle('c-orange');  
});
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.