Μέθοδοι innerWidth και innerHeight στο jQuery

Με τη βοήθεια των μεθόδων innerWidth και innerHeight παίρνουμε το πλάτος και το ύψος των στοιχείων, αλλά αυτή τη φορά λαμβάνοντας υπόψη όχι μόνο το περιεχόμενο, αλλά και τα εσωτερικά περιθώρια - padding.

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

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

Το CSS μοιάζει με αυτό:

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

Στο Javascript γράφουμε τον ακόλουθο κώδικα:

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

Όπως βλέπετε, οι τιμές διαφέρουν ήδη κατά 10px, καθώς λαμβάνονται υπόψη τα εσωτερικά περιθώρια, που στην περίπτωσή μας είναι 5px από όλες τις πλευρές.

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

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

Συμπληρώστε τη λύση της πρώτης άσκησης - εμφανίστε στη δεύτερη παράγραφο κάτω από το div #wrapper τις τιμές πλάτους και ύψους του div #wrapper, αυτή τη φορά λαμβάνοντας υπόψη τα εσωτερικά περιθώρια, αλλά χωρίς να λαμβάνονται υπόψη τα σύνορα και τα εξωτερικά περιθώρια.