Próbuję uzyskać wysokość elementu w JavaScript po zastosowaniu jednej/kilku transformacji CSS3 na nim.Uzyskaj rozmiar div z JS po transformacji CSS3
#transformed{
transform:scale(.5);
}
Niestety, zewnętrzna wysokość JQuery nie wygląda na to naiwnie.
$('#after').outerHeight(); //not affected by the transformation
Przykład: http://jsfiddle.net/mQ2nT/
Można użyć getBoundingClientRect uzyskać wymiary i pozycje po transformacji.
Wystarczy, przekształcić swoje elementy, oraz:
$('#after')[0].getBoundingClientRect();
// note the [0], the function is DOM not jQuery's.
Najlepszą rzeczą jest to, że będzie to również powrót właściwej pozycji, wymiary po każdej transformacji aplikujesz.
Jesteś wolny do rotate, skew, translate i wszystkiego innego, co zapewnia CSS. gBCR sobie z tym poradzi.
Fiddle http://jsfiddle.net/mQ2nT/2/ – Musa
Bardzo ładne! Nawet o tym nie myślałem. –
@Musa: Z ciekawości, czy istnieje sposób na zapytanie 'getBoundingClientRect', w tym o marginesy? Po uruchomieniu skrzypiec w Chrome i zastosowaniu marginesu do elementów div, jquery może użyć 'outerHight (true)', aby uwzględnić marginesy, ale wydaje się, że są one ignorowane przez właściwość 'getBoundingClientRect.height()'. Zobacz tutaj: http://jsfiddle.net/mQ2nT/4/ – Nope
Inspektor daje takie same wyniki. – Musa
W komentarzu @ Musa masz prawdopodobnie pecha - chyba, że chcesz rozpocząć ręczne analizowanie reguł transformacji CSS3. –
+1 Dobre pytanie. Tak wiele głosów na odpowiedź, ale nie na pytanie, które jest naprawdę interesujące. – Nope