wybierając prawdziwą wysokość DIV w jQuery

Mam DIV zdefiniowany w stałej wysokości:wybierając prawdziwą wysokość DIV w jQuery

.w { 
    height: 100px; 
    overflow: hidden; 
}

jeśli mogę umieścić tekst ten będzie ukryć wszystko, co wykracza poza 100px. Mam przycisk, który pokazuje cały tekst, w zasadzie robi to:

$('.w').height('auto');

uczyni cały tekst widoczny, ale chciałbym animować tego. A to nie zadziała z height = 'auto', musi mieć określoną wysokość.

Pytanie: w jaki sposób uzyskać wysokość, na jakiej powinien znajdować się DIV, aby móc wyświetlić cały tekst?

Źródło

2010-10-08 patrick

Można ustawić wysokość na "auto", następnie zmierzyć, a następnie ustawić ponownie i rozpocząć działanie.

Coś takiego (live example):

jQuery(function($) { 

    // Div starts with "style='height: 10px; overflow: hidden" 
    var div = $('#thediv'); 

    // On click, animate it to its full natural height 
    div.click(function() { 
    var oldHeight, newHeight; 

    // Measure before and after 
    oldHeight = div.height(); 
    newHeight = div.height('auto').height(); 

    // Put back the short height (you could grab this first 
    div.height(oldHeight); 
    div.animate({height: newHeight + "px"}, "slow"); 
    }); 
});

Źródło

2010-10-08 11:51:01

div.height ('auto'). Height() wydaje się działać świetnie! dzięki za to rozwiązanie. Myślę, że jest nieco bardziej elegancki niż div [0] .scrollheight. Sprawia, że jest bardziej czytelny – patrick

spróbować scrollHeight tak:

$('#ID_OF_DIV')[0].scrollHeight

Uwaga [0], gdyż jest własnością elementów DOM.

Źródło

2010-10-08 11:50:18 TheVillageIdiot

wydaje się działać: http://jsbin.com/ecoda/5 –

ok, to rzeczywiście działa! czy ta tablica jest gdzieś udokumentowana? Nigdy bym tego nie zgadł! ;-) – patrick

@patrick: * "to gdzieś jest ten dokument?" Tak, oto link: http://docs.jquery.com/Types#jQuery Instancja jQuery jest (między innymi) pseudo-tablicą elementy DOM, które znajdują się w bieżącym zestawie. Tak więc 'var jqobj = $ ('# foo');' daje instancję jQuery dla elementu o identyfikatorze "foo" (jeśli istnieje). Możesz uzyskać dostęp do surowego elementu przez 'jqobj [0]' i liczbę dopasowanych elementów poprzez 'jqobj.length'. ** W odróżnieniu od ** prawdziwej tablicy, powinieneś traktować właściwość 'length' oraz wpisy elementów jako tylko do odczytu. (ciąg dalszy) –

T.J. Odpowiedź Crowdera nie zadziałała, ponieważ "oldHeight" była obliczoną wartością piksela, inną niż wartość rem, którą określiłem w moim arkuszu stylów. Również styl inline przekroczył inną wysokość, jaką miałem dla innego zapytania o media. Zamiast zapisywania "oldHeight" i późniejszego przywrócenia, właśnie usunąłem wbudowany styl jQuery, ustawiając css 'height' na pusty ciąg znaków.

jQuery(function($) { 

    // Div starts with "style='height: 10px; overflow: hidden" 
    var div = $('#thediv'); 

    // On click, animate it to its full natural height 
    div.click(function() { 
     // Measure after 
     var newHeight = div.height('auto').height(); 

     // Remove inline styles 
     div.css('height', ''); 
     div.animate({height: newHeight + "px"}, "slow"); 

    }); 
});

Źródło

2014-10-03 16:07:56 Brandy

wybierając prawdziwą wysokość DIV w jQuery

Odpowiedz

Powiązane problemy