jQuery απόκτηση και ρύθμιση κλάσεων CSS

Με τη jQuery, μπορείτε εύκολα να διαχειριστείτε τα στοιχεία CSS.

jQuery διαχείριση CSS

Η jQuery έχει διάφορες μεθόδους για τη διαχείριση CSS. Θα μάθουμε τις εξής:

  • addClass() - Προσθήκη μιας ή περισσότερων κλάσεων στα επιλεγμένα στοιχεία
  • removeClass() - Αφαίρεση μιας ή περισσότερων κλάσεων από τα επιλεγμένα στοιχεία
  • toggleClass() - Προσθήκη ή αφαίρεση κλάσεων από τα επιλεγμένα στοιχεία
  • css() - Ρύθμιση ή επιστροφή ιδιοτήτων στυλ

Στυλ παράδειγματος

Η παρακάτω таблицή στυλ θα χρησιμοποιηθεί σε όλες τις παραδείξεις της σελίδας:

.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

Μέθοδος jQuery addClass()

Το παρακάτω παράδειγμα δείχνει πώς να προσθέσετε κλάσεις σε διαφορετικά στοιχεία. Φυσικά, μπορείτε να επιλέξετε και πολλαπλά στοιχεία κατά την προσθήκη κλάσεων:

Παράδειγμα

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

Προσπαθήστε το προσωπικά

Μπορείτε επίσης να καθορίσετε πολλαπλές κλάσεις στη μέθοδο addClass():

Παράδειγμα

$("button").click(function(){
  $("#div1").addClass("important blue");
});

Προσπαθήστε το προσωπικά

Μέθοδος jQuery removeClass()

Το παρακάτω παράδειγμα δείχνει πώς να αφαιρέσετε συγκεκριμένες κλάσεις από διαφορετικά στοιχεία:

Παράδειγμα

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

Προσπαθήστε το προσωπικά

Μέθοδος jQuery toggleClass()

Το παρακάτω παράδειγμα θα δείξει πώς να χρησιμοποιήσετε τη μέθοδο jQuery toggleClass(). Αυτή η μέθοδος προσθέτει ή αφαιρεί κλάσεις από τα επιλεγμένα στοιχεία:

Παράδειγμα

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

Προσπαθήστε το προσωπικά

Μέθοδος jQuery css()

Θα εξηγήσουμε την μέθοδο jQuery css() στο επόμενο κεφάλαιο

jQuery HTML Εγχειρίδιο Οδηγιών

Για πλήρη περιγραφή των μεθόδων jQuery CSS, επισκεφθείτε τον ιστότοπό μας jQuery CSS Εγχειρίδιο Οδηγιών