Metoden outerWidth

Metoden outerWidth gør det muligt at hente og ændre bredden af et element inklusive polstring, ramme og valgfrit - margener af et element. Det er vigtigt at huske, at vi vil få den 'beregnede værdi' af bredden (computed width). Fejl i beregningen kan også opstå, hvis brugeren ændrer sidens størrelse, eller hvis elementet eller dets forælder er skjult.

Syntaks

Sådan kan vi hente bredden af et element. Denne metode kan tage en valgfri parameter i form af true eller false (false er standard), afhængigt af om - de ydre margener skal medregnes eller ikke. I nogle tilfælde kan de opnåede værdier være brøker:

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

For at ændre bredden af et element - kan du blot sende et tal (for eksempel 400), så vil måleenheden være pixels, eller en streng, med angivelse af måleenhed (for eksempel '10em'):

$(selector).outerWidth(ny værdi, [inkluder_margin]);

Vi kan også anvende en given funktion på hvert element i sættet. Her vil funktionen som første parameter få nummeret af elementet i sættet, og som anden parameter - den aktuelle værdi af den angivne bredde for det konkrete element. this inde i funktionen vil pege på det aktuelle element. Værdien af elementets bredde vil blive ændret til den, som funktionen returnerer:

$(selector).outerWidth(function(nummer i sættet, aktuel breddeværdi));

Eksempel

Lad os for sammenligning udskrive information om bredden af afsnittet #test, hentet med metoderne width, innerWidth og outerWidth:

<p id="test">tekst</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 også

metoden width,
som gør det muligt at hente og ændre bredden af et element
metoden innerWidth,
som gør det muligt at hente og ændre bredden af et element, inklusive dets polstring