Vous pouvez utiliser la fonction suivante pour obtenir la largeur externe d'un élément dans un conteneur masqué.
$.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 changer .outerWidth()-.offsetWidth() pour votre situation.
La fonction clone d'abord l'élément en le copiant à un endroit où il sera visible. Il récupère ensuite la largeur de décalage et supprime finalement le clone. L'extrait 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 s'il y a CSS appliqué à l'élément qui change la largeur de l'élément qui ne sera pas appliquée si elle est un descendant direct du corps, alors cette méthode ne fonctionnera pas.Donc, quelque chose comme cela signifie que la fonction ne fonctionne pas:
.container-outer .measure-me {
width: 100px;
}
Vous devez soit:
- changement la spécificité du-à-dire sélecteur CSS.
.measure-me { width: 100px; }
- changez le
appendTo() pour ajouter le clone à un endroit où votre CSS sera également appliqué au clone. Assurez-vous que là où vous ne le mettez, que l'élément sera visible: .appendTo('.container-outer')
Encore une fois, cette fonction suppose que l'élément n'est caché parce qu'il est à l'intérieur d'un conteneur caché. Si l'élément lui-même est display:none, vous pouvez simplement ajouter du code pour rendre le clone visible avant de récupérer sa largeur de décalage. 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;
}
Cela fonctionnerait dans une situation comme celle-ci:
<style>
.measure-me {
display: none;
width: 120px;
}
</style>
<div class="container">
<div class="measure-me"></div>
</div>
Nice one, Peter. Merci. – Gausie
Voici un article sur ce sujet. Un problème que cette méthode pourrait rencontrer est de réinitialiser la position à la valeur d'origine. L'utilisation de la méthode d'échange fonctionne bien dans cette situation. http://bit.ly/6KwGzm –
Vous n'avez pas besoin de le réinitialiser à sa position d'origine si vous clonez l'élément. Supprimez simplement le clone après avoir récupéré sa position. – ajbeaven