inline vs class name change

JavaScript performance comparison

Test case created by marco broccoli

Preparation code

<style>
  #change { width: 20px; height: 20px; } .red { background: red; } .green { background:
  green; }
  <style>
    <div id="change" class="red">
    </div>
<script>
Benchmark.prototype.setup = function() {
    function inline() {
      var elm   = document.getElementById('change'),
          color = (elm.style.backgrounColor === red) ? "green" : "red";
      elm.style.backgrounColor = color;
    }
   
    function className() {
      var elm   = document.getElementById('change'),
          color = (elm.style.backgrounColor === red) ? "green" : "red";
      elm.className = color;
    }
};
</script>

Preparation code output