web-dev-qa-db-fra.com

jQuery 1.8 hauteur / largeur extérieure ne fonctionne pas

J'ai utilisé outerHeight et outerWidth à de nombreux endroits. Maintenant, après la sortie de jQuery 1.8, j'ai rencontré de nombreux problèmes causés par le retour d'objet au lieu de sa taille.

Par exemple:

$('#stackoverflowdiv').Height()      // returns 100 px
$('#stackoverflowdiv').outerHeight() // returns "stackoverflowdiv" div

La seule chose que j'ai trouvée pour résoudre ce problème était d'utiliser "vrai/faux" dans la fonction comme suit, mais j'obtiens les mêmes résultats que les fonctions standard width() et height():

$('#stackoverflowdiv').outerHeight(true)  //  returns 100 px
$('#stackoverflowdiv').outerHeight(false) //  returns 100 px

Quelqu'un a-t-il su pourquoi cela ne fonctionne plus ou d'une autre façon pour obtenir la hauteur/largeur de l'élément + ses marges.

EDIT: J'ai commencé à croire que cela est dû au fait que je sélectionne des éléments dans iframe en utilisant la fonction contents(). Je vais essayer de faire une démo.

jqueryheightjquery-1.8
28
gotqn

C'est en fait un bogue jQuery connu que vous pouvez lire ici .

Je le vis sans paramètre et le correctif définit le paramètre (même s'il existe un paramètre par défaut {false}), mais j'ai pu casser le violon de Barlas en remplaçant le paramètre vrai par 1 et false par 0. Donc, ne le faites pas ' t faites ça si vous êtes.

Faites ceci:

alert(jQuery(this).outerHeight(false));

Ne fais pas ça:

alert(jQuery(this).outerHeight());
alert(jQuery(this).outerHeight(0));
33
Coomie

Cela ne fonctionne que si je fais .outerHeight(1); pas .outerHeight(true);

5
Tony Knibb

La meilleure solution consiste à transmettre le paramètre booléen true ou false lors de l'appel de outerHeight ou outerWidth

Mais ..

Si, par hasard, vous n'avez pas accès aux fichiers qui appellent outerHeight ou si vous ne voulez pas modifier toutes les fonctions outerHeight de vos fichiers, vous pouvez remplacer la jQuery outerHeight fonction comme ci-dessous pour qu'il passe toujours le paramètre true

var oldOuterHeight =  $.fn.outerHeight;

$.fn.outerHeight = function () { 
    return oldOuterHeight.apply(this, [true]);
};
2
kiranvj

JQuery 1.8 height(), innerHeight(), outerHeight() et outerHeight(true) fonctionnent comme prévu:

[~ # ~] demo [~ # ~] - Méthodes de hauteur de travail

La démo ci-dessus utilise un div:

<div id="myDiv">My Div</div>

Avec le CSS suivant:

div{
    border: 1px solid blue;
    padding: 5px;
    margin: 10px;
}

En utilisant ce 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);

Il en résulte ce qui suit:

height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52
2
Nope

Cela fonctionne très bien, je ne peux pas être sûr sans voir votre html et votre css mais vous pouvez inspecter cet exemple et examiner que cela fonctionne bien sur jQuery 1.8.0

Ici fonctionne 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;
}​

Êtes-vous sûr d'avoir oublié d'utiliser un point-virgule ou de définir document.ready? Ou pire, vous avez oublié de définir margin ou border?

1
Barlas Apaydin