className VS classList Showdown (v20)

Revision 20 of this benchmark created by Mike Haverstock on May 22, 2015

Description

Preparation HTML

<style type="text/css">
  .blah{color: black;}
  .ble{font-size: 300px}
  .foo{color:#F00;height:50px;opacity:0.3;} 
  .bar{color:#0F0;height:70px;opacity:0.5;font-size: 900px} 
  .baz{color:#00F;height:90px;opacity:0.7;font-weight: bold}
</style>
<div id="base" class="blah ble">
    test 1
</div>

Setup

var node = document.getElementById('base');

Teardown

    node.className = 'blah ble';
  

Test runner

node.classList.add('foo');
node.classList.add('bar');
node.classList.add('baz');

node.className += ' foo bar baz';
 

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Jason Miller on October 12, 2012
• Revision 2: published on October 14, 2012
• Revision 3: published by Jason Miller on February 16, 2013
• Revision 5: published by Marcin on March 25, 2013
• Revision 6: published on April 25, 2013
• Revision 7: published on May 2, 2014
• Revision 8: published on May 16, 2014
• Revision 9: published on June 11, 2014
• Revision 11: published on August 31, 2014
• Revision 12: published on September 25, 2014
• Revision 13: published on September 25, 2014
• Revision 14: published by Bezon on December 5, 2014
• Revision 15: published by Bezon on December 6, 2014
• Revision 16: published by Andrey Sklyarevskiy on December 6, 2014
• Revision 17: published by Bezon on December 8, 2014
• Revision 18: published by Andrey Sklyarevskiy on December 8, 2014
• Revision 19: published on January 4, 2015
• Revision 20: published by Mike Haverstock on May 22, 2015
• Revision 21: published on May 22, 2015
• Revision 22: published on May 22, 2015
• Revision 23: published on May 22, 2015
• Revision 24: published on May 22, 2015
• Revision 25: published on September 12, 2015
• Revision 26: published on November 4, 2015