Question

I have about 100 elements in like and am trying to create an animation with jquery.

<div class="box" id="a1"></div>

I need to add special styles to each of the elements based on a function.

which of them is rendered faster in browser:

adding css property

$(this).css({'background-color':'#000'})

or adding class

$(this).addClass("style1")

Updated
Few more things i wish to add:

• Right now it has 100 elements and am adding them by jquery.
• To create randomness i need to create about 25 styles – am doing it by javascript
• should i also add size of stylesheet to the same to get exact benchmarks.

Answer 1

According to jsPerf, addClass is noticeably faster by about 50%.

Here’s the jsPerf data for Chrome but in my tests it was about the same using Firefox:

$('#a1').css({ 'background-color': '#000' }) 82,043 ±0.21% 48%
slower

$('#a1').addClass("style1") 158,876 ±0.83% fastest