Μέθοδος css
Η μέθοδος css επιτρέπει την ανάκτηση
και αλλαγή των CSS στυλ ενός στοιχείου.
Είναι σημαντικό να θυμόμαστε ότι θα λαμβάνουμε 'υπολογισμένες
τιμές' των ιδιοτήτων (computed style
properties), οι οποίες μπορεί να διαφέρουν από
αυτές που ορίζονται στα css στυλ.
Σύνταξη
Ανάκτηση μιας ιδιότητας:
$(επιλογέας).css(ιδιότητα);
Ανάκτηση πολλαπλών ιδιοτήτων, παράμετρος που περνάται - πίνακας με ονόματα ιδιοτήτων:
$(επιλογέας).css(['width', 'height', 'color']);
Αλλαγή μιας ιδιότητας:
$(επιλογέας).css(ιδιότητα, νέα τιμή);
Αλλαγή πολλαπλών ιδιοτήτων, περνώντας τις ως αντικείμενο,
που περιέχει ζεύγη 'κλειδί: τιμή'. Το όνομα της ιδιότητας
καθορίζεται σε μορφή CamelCase:
$(επιλογέας).css({fontSize: '12px', color: 'red'});
Ή, εναλλακτική παραλλαγή:
<p class="www">κείμενο</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Μπορούμε επίσης να εφαρμόσουμε μια δεδομένη συνάρτηση σε κάθε
στοιχείο στο σύνολο. Σε αυτή την περίπτωση η συνάρτηση
θα λάβει ως πρώτη παράμετρο τον αριθμό του στοιχείου στο σύνολο, και ως δεύτερη παράμετρο
- την τρέχουσα τιμή της δεδομένης css ιδιότητας
για το συγκεκριμένο στοιχείο. Σε αυτή την περίπτωση το this
μέσα στη συνάρτηση θα δείχνει στο τρέχον στοιχείο.
Η CSS ιδιότητα κάθε στοιχείου θα αλλάξει σε αυτή,
που επιστρέφει η συνάρτηση συγκεκριμένα για αυτό το στοιχείο:
$(επιλογέας).css(όνομα ιδιότητας, function(αριθμός στο σύνολο, τρέχουσα τιμή css ιδιότητας));
Παράδειγμα
Ας πάρουμε όλα τα στοιχεία με κλάση www
και ας αλλάξουμε το χρώμα τους σε κόκκινο:
<p class="www">κείμενο</p>
$('.www').css('color', 'red');
Παράδειγμα
Ας πάρουμε όλα τα στοιχεία με κλάση www
και ας αλλάξουμε το χρώμα τους σε κόκκινο, και το μέγεθος γραμματοσειράς
- σε 20px:
<p class="www">κείμενο</p>
$('.www').css({color:'red', fontSize:'20px'});
Ή, εναλλακτική παραλλαγή:
<p class="www">κείμενο</p>
$('.www').css({'color':'red', 'font-size':'20px'});
