Metoda width

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

Składnia

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

javascript$(selektor).width();

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

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

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

javascript$(selektor).width(function(indeks w zbiorze, bieżąca wartość szerokości));

Przykład

Sprawmy, aby po kliknięciu na div zmienić jego szerokość na wartość 40px, używając metody width, a także za pomocą css zmienić jego tło na zielone:

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

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

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

Zobacz też