Μέθοδοι width και height στο jQuery

Οι μέθοδοι width και height παίρνουν, αντίστοιχα, το πλάτος και το ύψος του περιεχομένου ενός στοιχείου χωρίς να λαμβάνουν υπόψη το padding, το border και το margin.

Ας πάρουμε τις τιμές πλάτους και ύψους της παραγράφου #test και ας τις εμφανίσουμε σε μια άλλη παράγραφο. Ας πάρουμε, για παράδειγμα, τον ακόλουθο κώδικα HTML:

<p id="test">κείμενο</p>
<p id="out"></p>

Το στυλ CSS της παραγράφου μοιάζει με αυτό:

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

Τώρα γράφουμε τον κώδικα Javascript:

let w = $('#test').width();
let h = $('#test').height();
$('#out').text('Πλάτος: ' + w + ' Ύψος: ' + h);

Επίσης, απλά με τη βοήθεια αυτών των μεθόδων μπορούμε να αλλάξουμε τις τιμές πλάτους και ύψους των στοιχείων. Για παράδειγμα, ας ορίσουμε το πλάτος του div #test1 ίσο με 250px, και το ύψος του #test2 - 200px:

$('#test1').width(250);
$('#test2').height(200);

Έχουμε την ακόλουθη σήμανση:

<div id="wrapper">
<div id="test">κείμενο</div>
</div>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
<p id="four"></p>

Τα ακόλουθα στυλ CSS:

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

Πάρτε και εμφανίστε τις τιμές πλάτους και ύψους του div #wrapper χωρίς τα περιθώρια και τα borders. Οι τιμές να εμφανιστούν στην πρώτη παράγραφο κάτω από αυτό το div.