inline vs class name change

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