Methoden width und height in jQuery

Die Methoden width und height ermitteln jeweils die Breite und Höhe des Inhalts eines Elements ohne Berücksichtigung von padding, border und margin.

Lassen Sie uns die Breiten- und Höhenwerte des Absatzes #test abrufen und in einem anderen Absatz ausgeben. Nehmen wir als Beispiel den folgenden HTML-Code:

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

Das CSS-Stylesheet für den Absatz sieht so aus:

p {
	margin: 10px;
	padding: 5px;
}

Jetzt schreiben wir den Javascript-Code:

let w = $('#test').width();
let h = $('#test').height();
$('#out').text('Width: ' + w + ' Height: ' + h);

Ebenso einfach können wir mit diesen Methoden die Breiten- und Höhenwerte 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').width(250);
$('#test2').height(200);

Wir haben das folgende Markup:

<div id="wrapper">
<div id="test">text</div>
</div>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
<p id="four"></p>

Mit den folgenden CSS-Stilen:

div {
margin: 10px;
padding: 5px;
border: 2px solid green;
}
#wrapper {
border-color: blueviolet;
}

Ermitteln Sie die Breite- und Höhenwerte der Div-Box #wrapper ohne Ränder und Rahmen. Geben Sie die Werte im ersten Absatz unter dieser Div-Box aus.