Metoda outerWidth

Metoda outerWidth lejon marrjen dhe ndryshimin e gjerësisë së elementit duke përfshirë padding-un, border-in dhe në mënyrë selektive - margin-in e elementit. Është e rëndësishme të kujtohet se ne do të marrim 'vlerën e llogaritur' të gjerësisë (computed width). Gabimet në llogaritje mund të ndodhin gjithashtu nëse përdoruesi ndryshon përmasat e faqes, si dhe nëse elementi ose prindi i tij janë të fshehur.

Sintaksa

Kështu mund të marrim gjerësinë e elementit. Kjo metodë mund të marrë një parametër opsional në formën e true ose false (false është parazgjedhur), varësisht nëse do të përfshihen margin-et apo jo. Në disa raste vlerat e marra mund të jenë thyesore:

$(selector).outerWidth([duke përfshirë margin]);

Për të ndryshuar gjerësinë e elementit - mund të kaloni thjesht një numër (për shembull 400), atëherë njësitë e matjes do të jenë piksel, ose një varg, me specifikimin e njësive të matjes (për shembull '10em'):

$(selector).outerWidth(vlera e re, [duke përfshirë margin]);

Gjithashtu ne mund të aplikojmë një funksion të caktuar për çdo element në grup. Në këtë rast, parametri i parë i funksionit do të marrë numrin e elementit në grup, dhe parametri i dytë - vlerën aktuale të gjerësisë së caktuar për elementin konkret. this brenda funksionit do të tregojë elementin aktual. Vlera e gjerësisë së elementit do të ndryshojë në atë që kthen funksioni:

$(selector).outerWidth(function(numri në grup, vlera aktuale e gjerësisë));

Shembull

Le të shfaqim informacionin për gjerësinë e paragrafit #test, të marrë me metodat width, innerWidth dhe outerWidth për krahasim:

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

Shihni gjithashtu

metoda width,
e cila lejon marrjen dhe ndryshimin e gjerësisë së elementit
metoda innerWidth,
e cila lejon marrjen dhe ndryshimin e gjerësisë së elementit, duke përfshirë padding-un e tij