jQuery και CSS

jQuery και CSS

H jQuery έχει την ικανότητα να χειρίζεται και να επεξεργάζεται τους κανόνες CSS που υπάρχουν σε μια ιστοσελίδα HTML. Με την βοήθεια της γλώσσας jQuery μπορούμε να αλλάξουμε την μορφοποίηση μιας ιστοσελίδας εύκολα και γρήγορα.

Η μέθοδος CSS() της jQuery

Η jQuery μας παρέχει την μέθοδο CSS(), για τον χειρισμό της CSS, η οποία συντάσεται με τρεις διαφορετικούς τρόπους:

  1. css(name): επιστρέφει την τιμή για τον κανόνα CSS
  2. css(name, value): ορίζει την την τιμή στον κανόνα που θέλουμε
  3. css({properties}): ορίζει πολλαπλές τιμές και κανόνες

Επιστροφή της τιμής ενός κανόνα με jQuery

Στο παρακάτω απόσπασμα κώδικα κάνουμε χρήση της συνάρτησης CSS() με τον πρώτο τρόπο σύνταξης, ώστε να μας επιστρέψει το χρώμα που έχει το φόντο της ιστοσελίδας μας:



$(this).css("background-color");

* Να σημειώσουμε πως η συνάρτηση επιστρέφει την τιμή για το πρώτο στοιχείο που θα ταιριάξει, δηλαδή αν στην ιστοσελίδα μας υπάρχουν δέκα παράγραφοι με διαφορετικά χρώματα και ζητήσουμε από την συνάρτηση CSS() να μας επιστρέψει το χρώμα της παραγράφου, θα επιστρέψει το χρώμα για την πρώτη παράγραφο που θα συναντήσει.

Ορισμός της τιμής ενός κανόνα με jQuery

Στο παρακάτω απόσπασμα κώδικα κάνουμε χρήση της συνάρτησης CSS() με τον δεύτερο τρόπο σύνταξης, ώστε να ορίζουμε το χρώμα που έχει το φόντο της ιστοσελίδας μας σε κίτρινο:



$("p").css("background-color","yellow");

Ορισμός πολλαπλών κανόνων και τιμών με jQuery

Στο παρακάτω απόσπασμα κώδικα κάνουμε χρήση της συνάρτησης CSS() με τον τρίτο τρόπο σύνταξης, ώστε να ορίζουμε το χρώμα που έχει το φόντο της ιστοσελίδας μας σε κίτρινο αλλά και το μέγεθος της γραμματοσειράς σε 200%:



$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery height() and width() Methods

Η jQuery μας προσφέρει δύο πολύ σημαντικές μεθόδους για τον χειρισμό του ύψους και του πλάτους των αντικειμένων. Για παράδειγμα στο παρακάτω απόσπασμα κώδικα, ορίζουμε το ύψος για το div με id #div1 σε 200px και το πλάτος για το div με id #div2 σε 300px:



$("#div1").height("200px");
$("#div2").width("300px");

Για την πλήρη λίστα με τις μεθόδους της JQuery για τον χειρισμό της CSS επισκεφθείτε την επίσημη ιστοσελίδα της jQuery.

Tags: ,

Προσθήκη σχολίου