Run results for: Offsets only vs computedStyle

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36 Edg/88.0.705.68

Browser: Chrome 88

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

HTML Preparation code:

<div id="box">wut</div>

Script Preparation code:

let box = document.getElementById('box');

Tests:

Offsets only
console.log('In DOM and visible: ' + (!!(box.offsetHeight || box.offsetWidth || box.offsetTop || box.offsetLeft || box.offsetParent) ? 'true' : 'false'));
ComputedStyle only
let style = getComputedStyle(box); console.log('Visible: ' + (style['display'] !== 'none' && style['visibility'] !== 'hidden' && style['opacity'] > 0.1 ? 'true' : 'false'));
Both
console.log('In DOM and visible: ' + (!!(box.offsetHeight || box.offsetWidth || box.offsetTop || box.offsetLeft || box.offsetParent) ? 'true' : 'false')); let style = getComputedStyle(box); console.log('Visible: ' + (style['display'] !== 'none' && style['visibility'] !== 'hidden' && style['opacity'] > 0.1 ? 'true' : 'false'));