removeAttribute vs removeProperty

Benchmark created by Geng Gao on September 24, 2012

Preparation HTML

<style>
#wrapper{ 
background:red; 
width:100px; 
height:100px; 
overflow:hidden;
-webkit-transition-duration:100ms;
-moz-transition-duration:100ms;
-ms-transition-duration:100ms;
-o-transition-duration:100ms;
transition-duration:100ms;
}
</style>
<div id="wrapper" style="-webkit-transform:translate3d(100px,0,0);-moz-transform:translate3d(100px,0,0);-ms-transform:translate3d(100px,0,0);-o-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0);">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum, eros sit
  amet sagittis convallis, erat nisl vehicula tortor, eu porta libero orci at nibh.
  Proin pulvinar facilisis tincidunt. Suspendisse potenti. In et lectus vitae urna
  pulvinar tempor ut quis augue. Integer a odio non arcu sagittis sagittis eu ac felis.
  Donec et tellus nec tellus luctus condimentum. Nulla a nibh enim. Morbi iaculis dictum
  enim, at aliquam nisi pharetra in. Sed eleifend imperdiet ante. Etiam non odio non
  tortor venenatis viverra ac nec ipsum. Class aptent taciti sociosqu ad litora torquent
  per conubia nostra, per inceptos himenaeos. Praesent sollicitudin, velit eu pretium
  vestibulum, metus orci accumsan nisl, quis gravida nibh nunc in orci. Cras quis nibh
  eu lectus commodo sodales quis a tellus.
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var c = document.getElementById('wrapper');

Test runner

c.removeAttribute('style');
 

$('#wrapper').removeAttr('style');

c.style.removeProperty('-webkit-transform');
c.style.removeProperty('-moz-transform');
c.style.removeProperty('-ms-transform');
c.style.removeProperty('-o-transform');
c.style.removeProperty('transform');

Revisions

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

• Revision 1: published by Geng Gao on September 24, 2012