Jak uzyskać wzrost x% w px?

Question

Dałem 100% wzrost div i chcę rzeczywistą wysokość w px.
Jak mogę sprawdzić wysokość tego elementu div?

Answer 1

z jQuery można użyć tego, kiedy pojemnik jest identyfikator div:

$(document).ready(function() { 
    alert($('#container').height()); 
}); 

Answer 2

jQuery powinny być w stanie używać:

$('#div').height();

Answer 3

Jak powiedziano, przy użyciu jQuery możesz użyć:

$(document).ready(function(){ 
    $("#container").height(); 
}); 

Należy pamiętać, że sposób height jest obliczany przez jQuery. Cytując z documentation:

Zauważ, że .height() zawsze zwraca wysokość treści, niezależnie wartości nieruchomości skrzynkowej wymiarowania CSS.

Oznacza to, że zignoruje wszelkie marginesy, obicia i granice, które można zastosować.

Niczyje alternatywy wymienić można skorzystać z, aby uzyskać dokładną wysokość jesteś zainteresowany, są następujące:

innerHeight()

$(document).ready(function(){ 
    $("#container").innerHeight(); 
}); 

Użyj tego, jeśli chcesz nie tylko element wysokość, ale także wszelkie obicia.

outerHeight()

$(document).ready(function(){ 
    $("#container").outerHeight(); //Include padding and borders 
    $("#container").outerHeight(true); //Include padding, borders and margins 
}); 

Użyj tego, jeśli chcesz nie tylko wysokość elementu, lecz także wszelkie obicia, obramowania i marginesy (jeśli prawdą jest przekazywana jako parametr).

Zobacz DEMO

Demo pokazuje, jak wysokość rozmiar to 300 jest stosowany do div. Dodatkowo css stosuje margines górny 20 pikseli, górny brzeg 50 pikseli i 5 pól, które wpływają na całkowitą wysokość.

wyjście Demo wysokości()

Wskazówki chociaż jak jQuery height() jeszcze tylko powraca 300 pikseli, ignorując dodatkową wysokość dodany do elementu przez css.

wyjście Demo innerHeight()

Zauważ jQuery innerHeight() powrotny 350 pikseli, co daje 300 z div + 50 dla wypełnienia.

wyjście Demo outerHeight()

Zauważ jQuery outerHeight() powrotną 360 pikseli, co daje 300 z div + z 50 dla dopełnienia + 10 na granicy (5 dolny i 5 górnych).

wyjście Demo outerHeight (prawda)

Zauważ jQuery outerHeight(true) powrotny 380 pikseli, który jest 300 od dz + z 50 dla dopełnienia + 10 na granicy (5 dół i 5 górnych) + 20 od marginesu.

Answer 4

Tutaj rozwiązanie bez korzystania jquery

document.querySelector("#yourElementIdGoesHere").getBoundingClientRect(); 

Funkcja zwraca się obiekt o następujących właściwościach

• dolnych
• wysokość
• lewo
• właściwej
• top
• szerokość

Wystarczy wziąć szerokość i wysokość Stamtąd są one w pikselach

-N