inline style replace

Benchmark created by Plip on

Description

Replacing some elements in inline style using jquery

Preparation HTML

<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div><div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div><div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<div style="width:100px;height:100px;">
  test
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  // extend function to replace style item
  jQuery.fn.extend({
    removeCss: function(cssName) {
      return this.each(function() {
        var curDom = $(this);
        jQuery.grep(cssName.split(","), function(cssToBeRemoved) {
          curDom.css(cssToBeRemoved, '');
        });
        return curDom;
      });
    }
  });
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Using .css
// async test
$("div[style]").css({"width":""});
ready
using removeCss extended
// async test
$("div[style]").removeCss("width");
ready

Revisions

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