Metoda outerWidth

Metoda outerWidth omogoča pridobivanje in spreminjanje širine elementa ob upoštevanju notranjih odstavkov, obrobe in izbirno - zunanjih odstavkov elementa. Pomembno je vedeti, da bomo dobili 'izračunano vrednost' širine (computed width). Napake pri izračunu se lahko pojavijo tudi, če uporabnik spreminja velikost strani ali če je element ali njegov starš skrit.

Sintaksa

Tako lahko dobimo širino elementa. Ta metoda lahko sprejme neobvezen parameter v obliki true ali false (false je privzeto), odvisno od tega - ali bodo upoštevani zunanji odstavki ali ne. V nekaterih primerih so lahko dobljene vrednosti delne:

$(selektor).outerWidth([vključno_margin]);

Za spremembo širine elementa - lahko podamo preprosto število (na primer 400), potem bodo enote meritve slikovne pike, ali niz, z navedbo enot merjenja (na primer '10em'):

$(selektor).outerWidth(nova vrednost, [vključno_margin]);

Prav tako lahko uporabimo določeno funkcijo za vsak element v nizu. Pri tem prvi parameter funkcije prejme številko elementa v nizu, drugi parameter pa - trenutno vrednost določene širine za konkretni element. this znotraj funkcije bo kazal na trenutni element. Vrednost širine elementa se bo spremenila na tisto, ki jo vrne funkcija:

$(selektor).outerWidth(function(številka v nizu, trenutna vrednost širine));

Primer

Za primerjavo izpišimo informacije o širini odstavka #test, dobljene z metodami width, innerWidth in outerWidth:

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

Glejte tudi

metoda width,
ki omogoča pridobivanje in spreminjanje širine elementa
metoda innerWidth,
ki omogoča pridobivanje in spreminjanje širine elementa, ob upoštevanju njegovih notranjih odstavkov