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

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

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

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

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

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

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

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

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

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

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

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