Metoden innerWidth

Metoden innerWidth gør det muligt at hente og ændre bredden af et element inklusive dets indre afstand. Det er vigtigt at huske, at vi vil modtage en 'beregnet værdi' for bredden (computed width). Fejl i beregningen kan også opstå, hvis brugeren ændrer sidens størrelse, eller hvis elementet eller dets forælder er skjult. Breddeværdien inkluderer ikke elementets kanttykkelse.

Syntaks

Hent elementets bredde. I nogle tilfælde de opnåede værdier kan være brøker:

$(selector).innerWidth();

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

$(selector).innerWidth(ny værdi);

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

$(selector).innerWidth(function(indeks i sættet, aktuel breddeværdi));

Eksempel

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

<p id="test">tekst</p>
<p id="out1"></p>
<p id="out2"></p>

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

Vi vil se en forskel på 10px, hvilket er summen af vores venstre og højre indre afstand.

Se også

metoden width,
som gør det muligt at hente og ændre elementets bredde
metoden outerWidth,
som gør det muligt at hente og ændre elementets bredde, inklusive dets afstand og kant