Methoden outerWidth und outerHeight in jQuery

Das letzte Methodenpaar - outerWidth und outerHeight, mit deren Hilfe es möglich ist, die Breite und Höhe eines Elements unter Berücksichtigung aller Abstände und Rahmen zu erhalten, oder man kann die äußeren Abstände margin nicht berücksichtigen.

Betrachten wir ein Beispiel. Nehmen wir an, wir haben einen Absatz:

<p id="test">text</p>
<p id="out"></p>

Das CSS sieht so aus:

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

Lassen Sie uns die Breiten- und Höhenwerte des Absatzes #test abrufen, unter Berücksichtigung der inneren Abstände und Rahmen. Dazu muss man an diese Methoden false übergeben oder die Klammern leer lassen (da es in der Methode standardmäßig bereits so eingestellt ist):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Jetzt unterscheiden sich unsere Werte noch um 4px, da die Rahmendicke auf jeder Seite 2px beträgt.

Lassen Sie uns nun die Breiten- und Höhenwerte des Absatzes #test abrufen, unter Berücksichtigung aller Abstände und Rahmen. Dazu muss man an die Methoden outerWidth und outerHeight true übergeben:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Jetzt unterscheiden sich unsere Werte von den vorherigen noch um 20px, da die äußeren Abstände auf jeder Seite 10px betragen.

Vervollständigen Sie die Lösung der vorherigen Aufgaben - geben Sie in den dritten Absatz unter dem Div #wrapper die Breiten- und Höhenwerte des Divs #wrapper aus - unter Berücksichtigung der inneren Abstände und Rahmen, aber ohne äußere Abstände. In den vierten Absatz geben Sie die Breiten- und Höhenwerte des Divs #wrapper unter Berücksichtigung aller Abstände und Rahmen aus.

Auch mit den Methoden outerWidth und outerHeight können wir die Breiten- und Höhenwerte von Elementen ändern. Lassen Sie uns beispielsweise die Breite des Divs #test1 auf 250px setzen und die Höhe von #test2 auf 200px:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Alle genannten Methoden zur Arbeit mit den Größen eines Elements sehen auch die Möglichkeit vor, eine Funktion auf jedes Element in der Menge anzuwenden.