Obtaining element height: clientHeight/offsetHeight/scrollHeight/getComputedStyle() (v5)

Revision 5 of this benchmark created on

Preparation HTML

<div>
Hello world!
</div>
<script>
var div = document.getElementsByTagName("DIV")[0];

// Vary width each time so is actually doing something
var oddValue = 'Value for when count is odd';
var evenValue = 'Value for even';
var count = 0;

var changeValue = function () {
    div.nodeValue = count%2 ? oddValue : evenValue;
    count++;
};
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
clientWidth
div.clientWidth;

changeValue();
ready
getComputedStyle().width
window.getComputedStyle(div).width;

changeValue();
ready
offsetWidth
div.offsetWidth;

changeValue();
ready
scrollWidth
div.scrollWidth;

changeValue();
ready

Revisions

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