Methode outerWidth

Die Methode outerWidth ermöglicht das Abrufen und Ändern der Breite eines Elements unter Berücksichtigung der Innenabstände, des Rahmens und optional - der Außenabstände des Elements. Es ist wichtig, sich daran zu erinnern, dass wir den 'berechneten Wert' der Breite (computed width) erhalten. Fehler bei der Berechnung können ebenfalls auftreten, wenn der Benutzer die Größe der Seite ändert, oder wenn das Element oder sein Elternelement ausgeblendet sind.

Syntax

So können wir die Breite eines Elements abrufen. Diese Methode kann einen optionalen Parameter in Form von true oder false entgegennehmen (false ist standardmäßig gesetzt), je nachdem, ob die Außenabstände berücksichtigt werden sollen oder nicht. In einigen Fällen können die erhaltenen Werte gebrochen sein:

$(Selector).outerWidth([inklusive_margin]);

Um die Breite eines Elements zu ändern - kann einfach eine Zahl übergeben werden (zum Beispiel 400), dann werden die Maßeinheiten Pixel sein, oder ein String, mit Angabe der Maßeinheiten (zum Beispiel '10em'):

$(Selector).outerWidth(neuer Wert, [inklusive_margin]);

Wir können auch eine gegebene 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. this innerhalb der Funktion wird auf das aktuelle Element zeigen. Der Wert der Breite des Elements ändert sich auf den, den die Funktion zurückgibt:

$(Selector).outerWidth(function(Index im Set, aktueller Breitenwert));

Beispiel

Lassen Sie uns zum Vergleich Informationen über die Breite des Absatzes #test ausgeben, ermittelt durch die Methoden width, innerWidth und 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);

Siehe auch

die Methode width,
die das Abrufen und Ändern der Breite eines Elements ermöglicht
die Methode innerWidth,
die das Abrufen und Ändern der Breite eines Elements ermöglicht, unter Berücksichtigung seiner Innenabstände