Metod width

Metod width omogućava dobijanje i promenu širine elementa. Važno je zapamtiti da ćemo dobiti 'izračunatu vrednost' širine (computed width). Za razliku od metoda css('width'), on vraća bezdimenzionu veličinu (na primer 400) i pogodan je za matematička izračunavanja. Metod dobija širinu sadržaja elementa, nezavisno od navedenog CSS svojstva box-sizing. Da bismo izbegli neudobnosti povezane sa ovim, preporučuje se korišćenje css('width'). Greške u izračunavanju mogu se takođe pojaviti, ako korisnik menja veličine stranice, kao i, ako je element ili njegov roditelj skriven. Vrednost širine ne uzima u obzir vrednosti paddinga i okvira (border-a).

Sintaksa

Dobijanje širine elementa. U nekim slučajevima dobijene vrednosti mogu biti razlomljene:

javascript$(selektor).width();

Da bismo promenili širinu elementa - možemo proslediti jednostavno broj (na primer 400), tada će jedinica merenja biti pikseli, ili string, sa naznakom jedinica merenja (na primer '10em'):

javascript$(selektor).width(nova vrednost);

Takođe možemo primeniti zadanu funkciju na svaki element u skupu. Pri tome će funkcija kao prvi parametar dobiti redni broj elementa u skupu, a kao drugi parametar - trenutnu vrednost zadate širine za konkretni element. Vrednost this unutar funkcije će ukazivati na trenutni element. Vrednost širine elementa će se promeniti na onu, koju funkcija vrati:

javascript$(selektor).width(function(redni broj u skupu, trenutna vrednost širine));

Primer

Hajde da pri kliku na div promenimo mu širinu na vrednost 40px, koristeći metod width, a takođe pomoću css promenimo mu pozadinu u zelenu:

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'
  });
});

Pogledajte takođe