Metoden innerWidth

Metoden innerWidth låter dig få och ändra bredden på ett element inklusive dess inre utfyllnad. Det är viktigt att komma ihåg att vi kommer att få ett 'beräknat värde' för 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. Breddvärdet tar inte hänsyn till elementets kantlinjers tjocklek.

Syntax

Få bredden på elementet. I vissa fall kan de erhållna värdena vara bråktal:

$(selector).innerWidth();

För att ändra elementets bredd - kan du skicka ett tal (till exempel 400), då kommer måttenheten att vara pixlar, eller en sträng med angiven måttenhet (till exempel '10em'):

$(selector).innerWidth(nytt värde);

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

$(selector).innerWidth(function(index i uppsättningen, aktuellt breddvärde));

Exempel

Låt oss för jämförelse skriva ut information om bredden på stycket #test, erhållen med metoderna width och innerWidth:

<p id="test">text</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 kommer att se en skillnad på 10px, vilket är summan av vår vänstra och högra inre utfyllnad.

Se även

metoden width,
som låter dig få och ändra bredden på ett element
metoden outerWidth,
som låter dig få och ändra bredden på ett element, inklusive dess utfyllnad och kantlinje