var target = document.getElementById('target'); target.onclick = function toggleStyle() { this.classList.toggle('foo-after'); this.classList.toggle('foo-before'); }
<div id="target" class="foo-after" onClick="toggleStyle()"> click here! </div>
#target { padding: 20px; text-align: center; } .foo-after { background: #e3e3e3; width: 200px; } .foo-before { background: #3e3e3e; width: 200px; color: #fff; }