Ottenere le dimensioni degli elementi nascosti 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.

'use strict';

const getElementDimensions = element => {
    const applyStyles = (elem, styles) => {
        for(let prop in styles) {
            elem.style[prop] = styles[prop];
        }
    };
    applyStyles(element, {
        display: 'block',
        visibility: 'hidden',
        position: 'absolute'
    });

    const dimensions = {
        width: element.offsetWidth,
        height: element.offsetHeight
    };

    applyStyles(element, {
        display: 'none',
        visibility: 'visible',
        position: 'static'
    });

    return dimensions;
};