Metoden outerWidth

Metoden outerWidth låter dig få och ändra bredden på ett element inklusive inre utfyllnad, kant och selektivt - yttre marginal på elementet. Det är viktigt att komma ihåg att vi kommer att få ett 'beräknat värde' på bredden (computed width). Fel i beräkningen kan också uppstå om användaren ändrar sidans storlek, eller om elementet eller dess förälder är dolda.

Syntax

Så här kan vi få bredden på ett element. Denna metod kan ta en valfri parameter i form av true eller false (false är standard), beroende på om yttre marginaler ska inkluderas eller inte. I vissa fall kan de erhållna värdena vara bråktal:

$(selector).outerWidth([inkludera_margin]);

För att ändra bredden på ett element - kan du skicka ett enkelt tal (till exempel 400), då blir måttenheten pixlar, eller en sträng, med angiven måttenhet (till exempel '10em'):

$(selector).outerWidth(nytt värde, [inkludera_margin]);

Vi kan också applicera en given funktion på varje element i uppsättningen. Då får funktionen det första parametern elementets index i uppsättningen, och den andra parametern - det nuvarande värdet för den givna bredden för det specifika elementet. this inuti funktionen kommer att peka på det aktuella elementet. Värdet på elementets bredd kommer att ändras till det som funktionen returnerar:

$(selector).outerWidth(function(index i uppsättningen, nuvarande breddvärde));

Exempel

Låt oss för jämförelse skriva ut information om bredden på stycket #test, erhållet med metoderna width, innerWidth och 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);

Se även

metoden width,
som låter dig få och ändra bredden på ett element
metoden innerWidth,
som låter dig få och ändra bredden på ett element, med hänsyn till dess inre utfyllnad