Methode innerWidth

Die Methode innerWidth ermöglicht das Abrufen und Ändern der Breite eines Elements unter Berücksichtigung seiner inneren Abstände. Es ist wichtig, sich daran zu erinnern, dass wir den 'berechneten Wert' der Breite erhalten (computed width). Fehler bei der Berechnung können ebenfalls auftreten, wenn der Benutzer die Seitengröße ändert oder wenn das Element oder sein Elternelement ausgeblendet sind. Der Breitenwert berücksichtigt nicht die Dicke des Rahmens des Elements.

Syntax

Breite eines Elements abrufen. In einigen Fällen können die erhaltenen Werte gebrochen sein:

$(Selektor).innerWidth();

Um die Breite eines Elements zu ändern - kann einfach eine Zahl übergeben werden (z.B. 400), dann ist die Maßeinheit Pixel, oder ein String mit Angabe der Maßeinheit (z.B. '10em'):

$(Selektor).innerWidth(neuer Wert);

Wir können auch eine bestimmte Funktion auf jedes Element im Set anwenden. Dabei erhält die Funktion als ersten Parameter die Indexnummer des Elements im Set und als zweiten Parameter - den aktuellen Wert der festgelegten Breite für das konkrete Element. Der Wert this innerhalb der Funktion wird auf das aktuelle Element zeigen. Der Breitenwert des Elements ändert sich auf den Wert, den die Funktion zurückgibt:

$(Selektor).innerWidth(function(Index im Set, aktueller Breitenwert));

Beispiel

Lassen Sie uns zum Vergleich Informationen über die Breite des Absatzes #test ausgeben, die mit den Methoden width und innerWidth ermittelt wurden:

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

Wir werden einen Unterschied von 10px sehen, was der Summe unserer linken und rechten Innenabstände entspricht.

Siehe auch

Methode width,
die das Abrufen und Ändern der Breite eines Elements ermöglicht
Methode outerWidth,
die das Abrufen und Ändern der Breite eines Elements ermöglicht, einschließlich seiner Abstände und Rahmen