outerHeight (true) podaje niewłaściwą wartość

Question

Chcę wysokość elementu kontenera, w tym marginesy i paddings.

Po najechaniu na element w narzędziu programistycznym Chrome otrzymuję wartość, której szukam, ale gdy używam jQuery $('element').outerHeight(true); Dostaję o wiele mniejszą wartość.

Ten element zawiera karuzelę jQuery (w pojemniku z position:relative i elementami position: absolute), czy to może mieć z tym coś wspólnego?

Dzięki z góry

Answer 1

myślę, że trzeba

.outerHeight({margin: true}); 

zgodnie here:

Marża może być zawarte przez przepuszczenie mapowania opcje z marginesem ustawionym na true.

Answer 2

Wpadłem na ten sam problem.

Firefoksa outerheight poprzez console.log 430 chrom outerheight poprzez console.log: 477

rzeczywistym outerheight (układ Firebug): 820

Po otwarciu Firebug lub usuwania StatusBar to określa poprawną wartość (820) w console.log (i stąd kod działa tak, jak powinien).

Problem dotyczy zdjęć. Nawet jeśli uruchamiasz go na gotowym dokumencie, nie wszystkie obrazy mogą być jeszcze załadowane, a zatem obliczenia są nieprawidłowe.

Używam wtyczki desandro i poprawiono mój problem. https://github.com/desandro/imagesloaded

Answer 3

Miałem ten sam problem. Uzyskać prawidłową wysokość w Chrome przy użyciu setTimeout trochę poczekać:

setTimeout (function() { 
     var ht = $('.my-class').outerHeight(true); 
    }, 1); 

Mam nadzieję, że pomoże!

Answer 4

Mam ten problem kilka razy, a najlepszym rozwiązaniem, bez użycia jakichkolwiek wtyczek i niezdyscyplinowanych funkcji setTimeout, jest użycie haka do zdarzenia onLoad przeglądarki. Z jQuery, to się robi tak:

$(window).load(function(){ ...outerHeight logic goes here... });

To może być całkowicie niezależne od standardowego $(function(){ ...code... }); więc cały swój inny kod poprawnie roboczej nie musi czekać, aż każdy pojedynczy element na stronie został załadowany.

Dlaczego tak się dzieje w pierwszej kolejności:
Chrome ma inny algorytm renderingu niż Firefox, która powoduje, że aby wywołać zdarzenia onload zanim wszystkie elementy na stronie są całkowicie wyciągnąć/wyświetlane i dostępne dla jQuery wybierz i pobierz wysokości. setTimeout() będzie działał przez większość czasu, ale nie chcesz rozwijać zależności od czegoś tak ślepego z natury - kto wie, w przyszłości to "dziwactwo" w Chrome może zostać naprawione!:)

Answer 5

Jeśli okno jest załadowane, a dokument jest gotowy, a użytkownik uwzględnił element pływający, a problem nadal występuje, należy rozważyć poszukiwanie elementu o tym samym identyfikatorze. Upewnij się, że otrzymujesz właściwy element za pomocą selektora jQuery. Zapomniałem, że mam inny element w domenie z identycznym identyfikatorem. Rozważ użycie jQuery do zmiany koloru tła w celu weryfikacji.

Answer 6

Wypróbowałem każde z tych rozwiązań. W końcu otworzyłem inspektora i zdałem sobie sprawę, że mój p nadal miał margin-top. Jak zawsze dzięki Normalizacja ...

Answer 7

ten, który pracował dokładnie tak jak powinno mi było połączyć zarówno @Matt Reilly & @Lasha odpowiedzi

$(window).load(function() { 
    setTimeout(function() { 
     // all the logic in here 
    }, 1); 
}); 

użyłem umieścić kod w $(document).ready(function(){...}); ale czasami robi się chytry, więc powyższe działa idealnie.

Answer 8

Wewnętrzne elementy ukryte, stałe i bezwzględne nie są prawidłowo rozliczane za pomocą outerHeight.

Spróbuj właściwość scrollHeight:

$('element').prop('scrollHeight')