jQuery 1.8 exterior Altura/Ancho no funciona
height jquery-1.8 (6)
Está funcionando bien, no puedo estar seguro sin ver su html y css, pero puede inspeccionar este ejemplo y examinar que funciona bien en jQuery 1.8.0
Aquí está trabajando jsFiddle.
jQuery:
console.log($(''#stackoverflowdiv'').outerHeight(false));//returns 110
console.log($(''#stackoverflowdiv'').outerHeight(true));//returns 130
css:
#stackoverflowdiv {
height:100px; margin:10px 5px; padding:5px; border 2px solid #fff;
}
¿Está seguro de que olvidó usar un punto y coma o definir un document.ready
? ¿O peor olvidó definir margin
o border
?
He usado outerHeight
y outerWidth
en muchos lugares. Ahora, después del lanzamiento de jQuery 1.8, he encontrado muchos problemas causados por la devolución de objetos en lugar de su tamaño.
Por ejemplo:
$(''#stackoverflowdiv'').Height() // returns 100 px
$(''#stackoverflowdiv'').outerHeight() // returns "stackoverflowdiv" div
Lo único que encontré para solucionar esto fue usar "verdadero / falso" en la siguiente función, pero obtengo los mismos resultados que las funciones de width()
y height()
estándar:
$(''#stackoverflowdiv'').outerHeight(true) // returns 100 px
$(''#stackoverflowdiv'').outerHeight(false) // returns 100 px
¿Alguien ha sabido por qué esto no funciona más u otra forma de obtener la altura / anchura del elemento + sus márgenes?
EDITAR: empecé a creer que esto se debe a que estoy seleccionando elementos en la función iframe utilizando contents()
. Intentaré hacer una demo.
Esto es realmente un error conocido de jQuery que puedes leer here .
Lo estoy experimentando sin ningún parámetro y la solución está configurando el parámetro (aunque hay un valor predeterminado {falso}), pero pude romper el violín de Barlas al reemplazar el parámetro verdadero con 1 y falso con 0. Así que no lo hagas. No hagas eso si eres.
Hacer esto:
alert(jQuery(this).outerHeight(false));
No hagas esto
alert(jQuery(this).outerHeight());
alert(jQuery(this).outerHeight(0));
JQuery 1.8 height()
innerHeight()
y outerHeight()
y outerHeight(true)
funcionan como se espera:
DEMO - Métodos de altura de trabajo.
La demo de arriba está usando un div:
<div id="myDiv">My Div</div>
Con el siguiente CSS:
div{
border: 1px solid blue;
padding: 5px;
margin: 10px;
}
Utilizando este script:
var $div = $("#myDiv");
var height = $div.height();
var heightWithPadding = $div.innerHeight();
var heightWithPaddingAndBorder = $div.outerHeight();
var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);
var $result = $("#result");
$result.append("height: " + height);
$result.append("<br />height with padding: " + heightWithPadding);
$result.append("<br />height with padding and borders: " + heightWithPaddingAndBorder);
$result.append("<br />height with padding and borders and margin: " + heightWithPaddingAndBorderAndMargin);
Resultando en lo siguiente:
height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52
La mejor solución es pasar el parámetro booleano true
o false
cuando se llama outerHeight
o outerWidth
Pero..
Si por casualidad no tiene acceso a los archivos que outerHeight
a outerHeight
o no desea editar todas outerHeight
funciones de outerHeight
en sus archivos, puede anular la función jQuery outerHeight
como la que se muestra a continuación para que siempre pase el true
parámetro.
var oldOuterHeight = $.fn.outerHeight;
$.fn.outerHeight = function () {
return oldOuterHeight.apply(this, [true]);
};
Solo funciona si lo hago .outerHeight(1);
no .outerHeight(true);
outerHeight
solo devuelve un entero o null
acuerdo con los DOC de jQuery .
Debe haber algo más en tu código que explote con tu salida y que te haga ver el elemento div.