Αυτό το άρθρο θα περιγράψει τις μεθόδους προσθήκης CSS με JavaScript.
Πώς να προσθέσετε CSS με JavaScript;
Στο JavaScript, μπορείτε να προσθέσετε στυλ CSS σε ένα στοιχείο τροποποιώντας την ιδιότητα στυλ του χρησιμοποιώντας τις ακόλουθες μεθόδους ή προσεγγίσεις:
- στυλ Ιδιότητα ως ενσωματωμένο στυλ
- Μέθοδος setAttribute() ως ενσωματωμένο στυλ
- Μέθοδος createElement() ως καθολικό στυλ
Μέθοδος 1: Προσθήκη CSS με JavaScript χρησιμοποιώντας την ιδιότητα 'style'.
Για την προσθήκη CSS σε JavaScript, χρησιμοποιήστε το ' στυλ ” ιδιοκτησία. Χρησιμοποιείται για την πρόσβαση και τον χειρισμό των ενσωματωμένων στυλ ενός στοιχείου. Δίνει ένα αντικείμενο που αντιπροσωπεύει τα ενσωματωμένα στυλ ενός στοιχείου και επιτρέπει σε κάποιον να αποκτήσει ή να ορίσει μεμονωμένες ιδιότητες στυλ.
Σύνταξη
Για την προσθήκη στυλ CSS σε JavaScript, η ακόλουθη σύνταξη χρησιμοποιείται για το ' στυλ ” ιδιοκτησία:
στοιχείο. στυλ ;
Εδώ, ' στοιχείο ” είναι μια αναφορά σε ένα στοιχείο HTML.
Παράδειγμα
Στο παρακάτω παράδειγμα, θα διαμορφώσουμε τα κουμπιά χρησιμοποιώντας JavaScript. Αρχικά, θα δημιουργήσουμε τρία κουμπιά και θα αντιστοιχίσουμε αναγνωριστικά σε αυτά, τα οποία βοηθούν στην πρόσβαση στα στοιχεία κουμπιών για στυλ:
< αναγνωριστικό κουμπιού = 'btn2' > Απορρίπτω κουμπί >
< αναγνωριστικό κουμπιού = 'btn3' > Αποδέχομαι κουμπί >
Πριν από το στυλ, η έξοδος θα μοιάζει με αυτό:
Τώρα, ας διαμορφώσουμε το στυλ αυτών των κουμπιών σε JavaScript χρησιμοποιώντας το ' στυλ ” ιδιοκτησία. Αρχικά, λάβετε όλα τα στοιχεία του κουμπιού χρησιμοποιώντας τα αναγνωριστικά που έχουν εκχωρηθεί με τη βοήθεια του ' getElementById() 'μέθοδος:
ας συμφωνήσουμε = έγγραφο. getElementById ( 'btn1' ) ;ας απορρίψει = έγγραφο. getElementById ( 'btn2' ) ;
ας δεχτούμε = έγγραφο. getElementById ( 'btn3' ) ;
Ορίστε τα χρώματα φόντου όλων αυτών των κουμπιών χρησιμοποιώντας το ' στυλ ” ιδιοκτησία:
συμφωνώ. στυλ . χρώμα του φόντου = 'πράσινος' ;απορρίπτω. στυλ . χρώμα του φόντου = 'το κόκκινο' ;
αποδέχομαι. στυλ . χρώμα του φόντου = 'κίτρινος' ;
Όπως μπορείτε να δείτε, τα κουμπιά έχουν διαμορφωθεί με επιτυχία χρησιμοποιώντας το ' στυλ ” ιδιοκτησία:
Μέθοδος 2: Προσθήκη CSS με JavaScript χρησιμοποιώντας τη μέθοδο 'setAttribute()'
Για να προσθέσετε στυλ CSS σε JavaScript, χρησιμοποιήστε το ' setAttribute() 'μέθοδος. Χρησιμοποιείται για να ορίσετε ή να προσθέσετε ένα χαρακτηριστικό και την τιμή του σε ένα στοιχείο HTML.
Σύνταξη
Η ακόλουθη σύνταξη χρησιμοποιείται για το ' setAttribute() 'μέθοδος:
Παράδειγμα
Εδώ, θα ορίσουμε τα διαφορετικά στυλ στα κουμπιά σε JavaScript χρησιμοποιώντας το ' setAttribute() 'μέθοδος. Ορίστε την ακτίνα περιγράμματος όλων των κουμπιών σε ' .5 εκμ ' και το χρώμα κειμένου του ' Συμφωνώ ' και ' Απορρίπτω 'κουμπιά για να' άσπρο '.
απορρίπτω. setAttribute ( 'στυλ' , 'χρώμα φόντου: κόκκινο, χρώμα: λευκό, ακτίνα περιγράμματος: 0,5 εκ.' ) ;
αποδέχομαι. setAttribute ( 'στυλ' , 'χρώμα φόντου: κίτρινο; ακτίνα περιγράμματος: 0,5 εκ.;' ) ;
Παραγωγή
Μέθοδος 3: Προσθήκη CSS με JavaScript χρησιμοποιώντας τη μέθοδο 'createElement()'
Εάν θέλετε να δημιουργήσετε κλάσεις ή αναγνωριστικά σε στυλ JavaScript όπως στο στυλ CSS, χρησιμοποιήστε το ' createElement() 'μέθοδος. Χρησιμοποιείται για τη δυναμική δημιουργία ενός νέου στοιχείου. Για το styling δημιουργήστε ένα ' στυλ ' στοιχείο που χρησιμοποιεί αυτή τη μέθοδο. Ο ' createElement ('στυλ') Η μέθοδος ' στο JavaScript χρησιμοποιείται για τη δυναμική δημιουργία ενός νέου στοιχείου στυλ, το οποίο μπορεί να χρησιμοποιηθεί για την προσθήκη στυλ CSS σε μια ιστοσελίδα.
Σύνταξη
Η δεδομένη σύνταξη χρησιμοποιείται για το ' createElement() 'μέθοδος:
Για την προσθήκη στυλ CSS σε JavaScript, χρησιμοποιήστε τη δεδομένη σύνταξη:
συνθ στυλ = έγγραφο. ΔημιουργίαΣτοιχείου ( 'στυλ' ) ;Στη συνέχεια, προσθέστε το στοιχείο στυλ στην ετικέτα κεφαλιού χρησιμοποιώντας την παρακάτω σύνταξη:
έγγραφο. κεφάλι . appendChild ( στυλ ) ;Εδώ, ' στυλ ' είναι μια αναφορά στο στοιχείο στυλ που δημιουργήθηκε πρόσφατα και ' έγγραφο.κεφαλή ” είναι το κύριο στοιχείο του εγγράφου HTML.
Παράδειγμα
Πρώτα, δημιουργήστε ένα στοιχείο στυλ χρησιμοποιώντας το ' createElement() 'μέθοδος:
Τώρα, δημιουργήστε ένα ' btn ' τάξη για την εφαρμογή του ίδιου στυλ σε όλα τα κουμπιά και τα αναγνωριστικά ' btn1 », « btn2 ' και ' btn3 ” για μεμονωμένο στυλ κουμπιών:
στυλ. innerHTML = `. btn {
γραμματοσειρά - Μέγεθος : 1,1 εκμ ;
υλικό παραγεμίσματος : 3 εικονοστοιχεία ;
περιθώριο : 2 εικονοστοιχεία ;
γραμματοσειρά - οικογένεια : χωρίς - ελαφρή γραμμή ;
σύνορο - ακτίνα κύκλου : .5 εκμ ;
}
#btn1 {
Ιστορικό - χρώμα : πράσινος ;
χρώμα : άσπρο ;
}
#btn2 {
Ιστορικό - χρώμα : το κόκκινο ;
χρώμα : άσπρο ;
}
#btn3 {
Ιστορικό - χρώμα : κίτρινος ;
}
` ;
Τώρα, προσθέστε το στοιχείο στυλ στην κεφαλή του εγγράφου περνώντας ως παράμετρο στο ' appendChild() 'μέθοδος:
έγγραφο. κεφάλι . appendChild ( στυλ ) ; Παραγωγή
Αυτό αφορά την προσθήκη CSS σε JavaScript.
συμπέρασμα
Για την προσθήκη CSS με JavaScript, χρησιμοποιήστε το ενσωματωμένο στυλ, συμπεριλαμβανομένου του ' στυλ “Ακίνητα και” setAttribute() ' μέθοδος ή το παγκόσμιο στυλ χρησιμοποιώντας το ' createElement() μέθοδος. Το καθολικό στυλ είναι πιο αποτελεσματικό, ενώ δεν συνιστάται η ενσωματωμένη μέθοδος, καθώς δυσκολεύει τη διατήρηση των στυλ εφαρμογής και μπορεί να οδηγήσει σε επανάληψη κώδικα. Αυτό το άρθρο περιγράφει τις μεθόδους προσθήκης CSS με JavaScript.