Methoden innerWidth und innerHeight in jQuery
Mit den Methoden innerWidth und
innerHeight erhalten wir die Breite und Höhe
der Elemente, aber diesmal unter Berücksichtigung nicht nur des Inhalts, sondern
auch der inneren Abstände - padding.
Lassen Sie uns die Werte für Breite und Höhe des Absatzes
#test abrufen, dieses Mal jedoch mit innerWidth und
innerHeight, und sie in einem anderen Absatz ausgeben. Nehmen wir an,
wir haben zwei Absätze:
<p id="test">text</p>
<p id="out"></p>
Das CSS sieht so aus:
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
Im Javascript schreiben wir folgenden Code:
let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);
Wie Sie sehen, unterscheiden sich die Werte bereits um 10px,
da die inneren Abstände berücksichtigt werden, die in
unserem Fall auf allen Seiten 5px betragen.
Ebenso einfach können wir mit den Methoden innerWidth und
innerHeight die
Werte für Breite und Höhe von Elementen ändern.
Lassen Sie uns beispielsweise die Breite der Div-Box #test1
auf 250px und die Höhe von #test2 auf 200px setzen:
$('#test1').innerWidth(250);
$('#test2').innerHeight(200);
Vervollständigen Sie die Lösung der ersten Aufgabe - geben Sie
in den zweiten Absatz unter der Div-Box #wrapper
die Werte für Breite und Höhe der Div-Box #wrapper aus,
dieses Mal unter Berücksichtigung der inneren Abstände, aber ohne
Berücksichtigung der Ränder und äußeren Abstände.
