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";