Trouver le “potentiel” de la largeur d'un élément masqué

La seule chose que je peux penser à est de montrer (ou un clone) afin de permettre la récupération de la offsetWidth.

Pour cette mesure étape, juste faire de sa position absolue et sa valeur x ou y un gros point négatif, il sera rendu, mais ne pas être visible pour l'utilisateur.

Vous pouvez utiliser la fonction suivante pour obtenir la largeur d'un élément qui est à l'intérieur d'un conteneur caché.

$.fn.getHiddenOffsetWidth = function () {
    //save a reference to a cloned element that can be measured
    var $hiddenElement = $(this).clone().appendTo('body');

    //calculate the width of the clone
    var width = $hiddenElement.outerWidth();

    //remove the clone from the DOM
    $hiddenElement.remove();

    return width;
};

Vous pouvez modifier .outerWidth() à .offsetWidth() pour votre situation.

La fonction première des clones de l'élément, de le copier à un endroit où il sera visible. Elle récupère ensuite le décalage largeur et enlève enfin le clone. L'extrait de code suivant illustre une situation où cette fonction serait parfait:

<style>
    .container-inner {
        display: none;
    }

    .measure-me {
        width: 120px;
    }
</style>

<div class="container-outer">
    <div class="container-inner">
        <div class="measure-me"></div>
    </div>
</div>

S'il vous plaît être conscient que si il y a CSS appliquée à l'élément qui change la largeur de l'élément qui ne sera pas appliqué si il est un descendant direct du corps, cette méthode ne fonctionnera pas. Donc quelque chose comme ceci signifie que la fonction ne fonctionne pas:

.container-outer .measure-me {
    width: 100px;
}

Vous devrez soit:

• changement de la spécificité du sélecteur CSS d'ie. .measure-me { width: 100px; }
• changer le appendTo() pour ajouter la sélection à un endroit où votre CSS sera également appliquée pour le clone. S'assurer que l'endroit où vous vous faire mettre, que l'élément sera visible: .appendTo('.container-outer')

Encore une fois, cette fonction suppose que l'élément n'est caché parce que c'est à l'intérieur d'un conteneur caché. Si l'élément lui-même est display:none, vous pouvez simplement ajouter un peu de code pour faire le clone visible avant de récupérer du décalage de largeur. Quelque chose comme ceci:

$.fn.getHiddenOffsetWidth = function () {
    var hiddenElement $(this)
        width = 0;

    //make the element measurable
    hiddenElement.show();

    //calculate the width of the element
    width = hiddenElement.outerWidth();

    //hide the element again
    hiddenElement.hide();

    return width;
}

Ce serait de travailler dans une situation comme celle-ci:

<style>
    .measure-me {
        display: none;
        width: 120px;
    }
</style>

<div class="container">
    <div class="measure-me"></div>
</div>

Ce que j'ai fait ;
par le temps de cacher cet élément, stockées sa largeur dans son jeu de données.
Il ne va travailler pour vous si vous pouvez masquer par programmation.

ie.

Quand À Se Cacher ;

var elem = $("selectorOfElement");

elem.dataset.orgWidth = elem.clientWidth;

Plus tard lors de l'obtention d' ;

var elem = $("selectorOfElement");

var originalWidthWas = elem.dataset.orgWidth;

c'est parce que sa caché via display: none; Ce que j'ai fait dans le passé est de faire un "récepteur" div qui je utiliser le positionnement absolu sur de descendre au bas de la page. Puis-je charger le nouvel élément dans le, prenez les dimensions et le retirer quand im fait - puis retirez le récepteur quand im fait.

Une autre chose que vous pouvez faire est de ne pas utiliser hide(); mais à la place visibility: hidden; affichage: ; Cependant, cela signifie la zone vide sera rendus là où le nœud est associé.

Si vous connaissez l'élément à la totalité de la largeur d'un élément parent, une autre approche est de créer une méthode récursive:

es5:

var getWidth;
getWidth = function($el){
  return $el.offsetWidth || getWidth($el.parentElement);
}
var width = getWidth(document.getElementById('the-element'));

es6:

let getWidth
getWidth = ($el) => $el.offsetWidth || getWidth($el.parentElement)

const width = getWidth(document.getElementById('the-element'))