outerWidth metódus

A outerWidth metódus lehetővé teszi egy elem szélességének lekérését és módosítását a belső margókkal, a szegéllyel és opcionálisan - a külső margókkal együtt. Fontos emlékezni, hogy a 'számított értéket' kapjuk meg a szélességből (computed width). Számítási hibák akkor is előfordulhatnak, ha a felhasználó megváltoztatja az oldal méretét, vagy ha az elem vagy annak szülője rejtett.

Szintaxis

Így kérhetjük le egy elem szélességét. Ez a metódus elfogadhat egy opcionális paramétert true vagy false formájában (false az alapértelmezett), attól függően - hogy a külső margókat figyelembe kell-e venni vagy sem. Egyes esetekben a kapott értékek törtek lehetnek:

javascript$(selector).outerWidth([include_margin]);

Az elem szélességének módosításához - átadhatunk egyszerűen egy számot (például 400), ekkor a mértékegység pixel lesz, vagy egy karakterláncot, a mértékegység megadásával (például '10em'):

javascript$(selector).outerWidth(new value, [include_margin]);

Egy meghatározott függvényt is alkalmazhatunk minden elemre a halmazban. Eközben az első paraméterként a függvény megkapja az elem sorszámát a halmazban, a második paraméterként pedig - az adott elem aktuális szélességértékét. A this a függvényen belül az aktuális elemre fog mutatni. Az elem szélességének értéke azon értékre fog változni, amit a függvény visszaad:

javascript$(selector).outerWidth(function(index, currentWidth));

Példa

Hasonlításként írassuk ki a #test bekezdés szélességéről szóló információt, amelyet a width, innerWidth és a outerWidth metódusokkal kaptunk:

html<p id="test">szöveg</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

javascriptlet 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);

Lásd még