CSS: individual setters and cssText

Benchmark created on

Preparation HTML

<iframe id="bigstring"></iframe>
<iframe id="6string"></iframe>
<iframe id="set7"></iframe>
<iframe id="set6"></iframe>
<iframe id="set6.1"></iframe>
<iframe id="set5"></iframe>
<iframe id="set4"></iframe>
<iframe id="set3"></iframe>
<iframe id="set2"></iframe>
<iframe id="set2.1"></iframe>
<script>
  bigstring = document.getElementById('bigstring');
  string6 = document.getElementById('6string');
  set7 = document.getElementById('set7');
  set6 = document.getElementById('set6');
  set61 = document.getElementById('set6.1');
  set5 = document.getElementById('set5');
  set4 = document.getElementById('set4');
  set3 = document.getElementById('set3');
  set2 = document.getElementById('set2');
  set21 = document.getElementById('set2.1');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
One big string (7 properties)
bigstring.style.cssText = 'width:100%;height:200px;position:absolute;z-index:1337;background-color:#FFFFFF;border:0;visibility:visible;';
ready
One big string (6 properties, no border)
string6.style.cssText = 'width:100%;height:200px;position:absolute;z-index:1337;background-color:#FFFFFF;visibility:visible;';
ready
7 setters
set7.style.width  = '100%';
set7.style.height = '200px';
set7.style.position = 'absolute';
set7.style.zIndex = "1337";
set7.style.backgroundColor = '#FFFFFF';
set7.style.border = 0;
set7.style.visibility = 'visible';
ready
6 setters (no border)
set6.style.width  = '100%';
set6.style.height = '200px';
set6.style.position = 'absolute';
set6.style.zIndex = "1337";
set6.style.backgroundColor = '#FFFFFF';
set6.style.visibility = 'visible';
 
ready
6 setters (no zIndex)
set61.style.width  = '100%';
set61.style.height = '200px';
set61.style.position = 'absolute';
set61.style.border = 0;
set61.style.backgroundColor = '#FFFFFF';
set61.style.visibility = 'visible';
 
ready
5 setters
set5.style.width  = '100%';
set5.style.height = '200px';
set5.style.position = 'absolute';
set5.style.backgroundColor = '#FFFFFF';
set5.style.visibility = 'visible';
 
ready
4 setters
set4.style.width  = '100%';
set4.style.height = '200px';
set4.style.position = 'absolute';
set4.style.backgroundColor = '#FFFFFF';
 
ready
3 setters
set3.style.width  = '100%';
set3.style.height = '200px';
set3.style.position = 'absolute';
ready
2 setters
set2.style.width  = '100%';
set2.style.height = '200px';
 
ready
2 setters (w/ position, no width)
set21.style.height = '200px';
set21.style.position = 'absolute';
ready

Revisions

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