Metoda height

Metoda height pozwala pobierać i zmieniać wysokość elementu. Ważne jest, aby pamiętać, że będziemy otrzymywać 'obliczoną wartość' wysokości (computed height). W przeciwieństwie do metody css('height'), zwraca ona wartość bez jednostki (na przykład 400) i jest wygodna w obliczeniach matematycznych. Metoda pobiera wysokość treści elementu, niezależnie od zdefiniowania właściwości CSS box-sizing. Aby uniknąć zbędnych obliczeń, zaleca się używanie css('height'). Błędy w obliczeniach mogą również występować, jeśli użytkownik zmienia rozmiary strony, a także, jeśli element lub jego rodzic są ukryci. Wartość wysokości nie uwzględnia wartości marginesów wewnętrznych i obramowania.

Składnia

Pobierz wysokość elementu. W niektórych przypadkach uzyskane wartości mogą być ułamkowe:

javascript$(selektor).height();

Aby zmienić wysokość elementu - można przekazać po prostu liczbę (na przykład 400), wtedy jednostką miary będą piksele, albo ciąg znaków, z podaniem jednostki miary (na przykład '10em'):

javascript$(selektor).height(nowa wartość);

Możemy również zastosować daną funkcję do każdego elementu w zbiorze. Przy tym pierwszym parametrem funkcja otrzyma numer elementu w zbiorze, a drugim parametrem - bieżącą wartość zadanej wysokości dla konkretnego elementu. this wewnątrz funkcji będzie wskazywać na bieżący element.

Wartość wysokości elementu zmieni się na tę, którą zwróci funkcja:

javascript$(selektor).height(function(numer w zbiorze, bieżąca wartość wysokości));

Przykład

Sprawmy, aby po kliknięciu na #test zmienić mu wysokość na wartość 30px, używając metody height, a także za pomocą css zmienić jego tło na zielone:

html<div id="test"></div>

css#test {
  width: 50px; 
  height: 90px;
  background: red; 
  color: white;
  margin-top: 10px; 
  cursor: pointer;
}

javascript$('#test').one('click', function() {
  $(this).height(30).css({
    cursor: 'auto',
    backgroundColor: 'green'
  });
});

Zobacz też