jQuery 1.8 exterior Altura/Ancho no funciona

height jquery-1.8

Question

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.

Answer 1

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 ?

Answer 2

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));

Answer 3

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

Answer 4

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]);
};

Answer 5

Solo funciona si lo hago .outerHeight(1); no .outerHeight(true);

Answer 6

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.