JavaScript: ottenere le dimensioni degli elementi che sono nascosti con display: none

Gli elementi con la dichiarazione CSS display: none vengono rimossi dal layout del documento e perdono le loro dimensioni quando si trovano in questo stato. Tuttavia esiste una soluzione per reperire le loro dimensioni.

La soluzione consiste nel reinserirli temporaneamente nel layout per ottenerne le dimensioni e quindi nasconderli nuovamente.

'use strict';

const element = document.querySelector( '#test' );
	element.style.display = 'block';
	element.style.visibility = 'hidden';
	element.style.position = 'absolute';
	
	const width = element.offsetWidth;
	const height = element.offsetHeight;
	
	element.style.display = 'none';
	element.style.visibility = 'visible';
	element.style.position = 'static';