Μέθοδος width

Η μέθοδος width επιτρέπει τη λήψη και την αλλαγή του πλάτους ενός στοιχείου. Είναι σημαντικό να θυμόμαστε ότι θα λαμβάνουμε την 'υπολογισμένη τιμή' του πλάτους (computed width). Σε αντίθεση με τη μέθοδο css('width'), επιστρέφει μια αδιάστατη ποσότητα (για παράδειγμα 400) και είναι βολική για μαθηματικούς υπολογισμούς. Η μέθοδος λαμβάνει το πλάτος του περιεχομένου του στοιχείου, ανεξάρτητα από την ορισθείσα CSS-ιδιότητα box-sizing. Για να αποφύγουμε τις δυσκολίες που σχετίζονται με αυτό, συνιστάται η χρήση της css('width'). Σφάλματα στον υπολογισμό μπορεί επίσης να προκύψουν εάν ο χρήστης αλλάζει τις διαστάσεις της σελίδας, καθώς και, εάν το στοιχείο ή ο γονέας του είναι κρυμμένα. Η τιμή του πλάτους δεν λαμβάνει υπόψη τις τιμές των περιθωρίων και του περιγράμματος.

Σύνταξη

Λήψη του πλάτους του στοιχείου. Σε ορισμένες περιπτώσεις οι τιμές που λαμβάνονται μπορεί να είναι κλασματικές:

$(selector).width();

Για να αλλάξουμε το πλάτος του στοιχείου - μπορούμε να περάσουμε απλώς έναν αριθμό (για παράδειγμα 400), τότε οι μονάδες μέτρησης θα είναι pixels, ή μια συμβολοσειρά, με καθορισμό μονάδων μέτρησης (για παράδειγμα '10em'):

$(selector).width(νέα τιμή);

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

$(selector).width(function(αριθμός στο σύνολο, τρέχουσα τιμή πλάτους));

Παράδειγμα

Ας αλλάξουμε, upon click, στο div το πλάτος του στην τιμή 40px, χρησιμοποιώντας τη μέθοδο width, και επίσης με τη βοήθεια της css ας αλλάξουμε το φόντο του σε πράσινο:

<div id="test"></div>

#test {
	width: 90px; 
	height: 80px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).width(40).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Δείτε επίσης

η μέθοδος height,
που επιτρέπει τη λήψη και την αλλαγή του ύψους ενός στοιχείου
η μέθοδος innerWidth,
που επιτρέπει τη λήψη και την αλλαγή του πλάτους ενός στοιχείου, λαμβάνοντας υπόψη τα εσωτερικά του περιθώρια
η μέθοδος outerWidth,
που επιτρέπει τη λήψη και την αλλαγή του πλάτους ενός στοιχείου, λαμβάνοντας υπόψη τα περιθώρια και το περίγραμμά του
η μέθοδος css,
που επιτρέπει τη λήψη και την αλλαγή των CSS στυλ ενός στοιχείου