Come posso ottenere le dimensioni di un elemento con display: none in JavaScript?

Come posso ottenere le dimensioni di un elemento con display: none in JavaScript?

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.


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

Torna su