Μέθοδοι outerWidth και outerHeight στο jQuery

Το τελευταίο ζευγάρι μεθόδων - outerWidth και outerHeight, με τις οποίες είναι δυνατό να ληφθεί το πλάτος και το ύψος ενός στοιχείου λαμβάνοντας υπόψη όλα τα περιθώρια και τα borders, ή μπορεί να μην ληφθούν υπόψη τα εξωτερικά περιθώρια margin.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια παράγραφο:

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

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

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

Ας πάρουμε τις τιμές πλάτους και ύψους της παραγράφου #test, λαμβάνοντας υπόψη τα εσωτερικά περιθώρια και τα borders, για αυτό στις μεθόδους είναι απαραίτητο να περάσουμε false ή να αφήσουμε τις παρενθέσεις κενές (καθώς αυτή είναι ήδη η default τιμή στη μέθοδο):

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

Τώρα οι τιμές μας θα διαφέρουν κατά 4px, καθώς το πάχος των borders είναι 2px από κάθε πλευρά.

Και τώρα ας πάρουμε τις τιμές πλάτους και ύψους της παραγράφου #test, λαμβάνοντας υπόψη όλα τα περιθώρια και τα borders, για αυτό στις μεθόδους outerWidth και outerHeight είναι απαραίτητο να περάσουμε true:

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

Τώρα οι τιμές μας θα διαφέρουν από τις προηγούμενες κατά 20px, καθώς τα εξωτερικά περιθώρια είναι 10px από κάθε πλευρά.

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

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

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Όλες οι καθορισμένες μέθοδοι εργασίας με μεγέθη στοιχείου προβλέπουν επίσης τη δυνατότητα εφαρμογής μιας συνάρτησης σε κάθε στοιχείο σε ένα σύνολο.