Run results for: getComputedStyle vs style.getPropertyValue vs. getBoundingClientRect

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0.1 Safari/605.1.15

Browser: Safari 18

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 28 days ago

HTML Preparation code:

<div id="foo">some content <div>text</div> yet one more</div>

Tests:

style.getPropertyValue
var i = 5000; var elm = document.getElementById('foo'); while (i--) { checkDisplay(elm); } function checkDisplay(elm) { return parseInt(elm.style.getPropertyValue('width'), 10) === 0; }
getBoundingClientRect
var i = 5000; var elm = document.getElementById('foo'); while (i--) { checkDisplay(elm); } function checkDisplay(elm) { return Math.floor(elm.getBoundingClientRect().width) === 0; }
getComputedStyle
var i = 5000; var elm = document.getElementById('foo'); while (i--) { checkDisplay(elm); } function checkDisplay(elm) { return parseInt(window.getComputedStyle(elm, null).getPropertyValue('width'), 10) === 0; }