Puede usar la siguiente función para obtener el ancho exterior de un elemento que es dentro de un contenedor oculto.
$.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;
};
Puede cambiar .outerWidth()-.offsetWidth() para su situación.
La función primero clona el elemento, copiándolo en un lugar donde será visible. Luego recupera el ancho de desplazamiento y finalmente elimina el clon. El siguiente fragmento ilustra una situación en la que esta función sería perfecto:
<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>
Por favor, tenga en cuenta que si hay CSS aplicada al elemento que cambia la anchura del elemento que no se aplicará si es un descendiente directo del cuerpo, entonces este método no funcionará.Así que algo como esto significará que la función no funciona:
.container-outer .measure-me {
width: 100px;
}
ya sea que usted necesita:
- cambiar la especificidad del selector CSS es decir.
.measure-me { width: 100px; }
- cambie el
appendTo() para agregar el clon a un lugar donde su CSS también se aplicará al clon. Asegúrese de que donde quiera que haces la idea, de que el elemento será visible: .appendTo('.container-outer')
Una vez más, esta función supone que el elemento sólo se oculta porque es dentro de un contenedor oculto. Si el elemento en sí es display:none, simplemente puede agregar un código para hacer que el clon sea visible antes de recuperar su ancho de desplazamiento. Algo como esto:
$.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;
}
Esto funcionaría en una situación como esta:
<style>
.measure-me {
display: none;
width: 120px;
}
</style>
<div class="container">
<div class="measure-me"></div>
</div>
uno de los buenos, Peter. Gracias. – Gausie
Aquí hay una publicación de blog sobre este tema. Un problema que este método podría enfrentar es restablecer la posición al valor original. Usar el método de intercambio funciona bien en esta situación. http://bit.ly/6KwGzm –
No necesita restablecerlo a su posición original si está clonando el elemento. Simplemente elimine el clon después de haber recuperado su posición. – ajbeaven