Πώς να αλλάξετε ένα CSS Class Χαρακτηριστικό Με Javascript

Αλλαγή της κατηγορίας χαρακτηριστικό ενός στοιχείου HTML χρησιμοποιώντας JavaScript επιτρέπει στους προγραμματιστές να δημιουργήσουν διαδραστικά αποτελέσματα μέσα σε ιστοσελίδες . Χρησιμοποιώντας μια λειτουργία JavaScript , μπορείτε να καθορίσετε ποια συμπεριφορά πρέπει να πραγματοποιηθεί όταν οι χρήστες αλληλεπιδρούν με τα στοιχεία της σελίδας σας , αλλάζοντας τις ιδιότητες CSS στυλ τους ως απάντηση σε αυτή την αλληλεπίδραση . Η αλλαγή ονομάτων τάξη χαρακτηριστικό είναι μία από τις βασικές τεχνικές που εμπλέκονται σε αυτό το έργο , το οποίο είναι εφικτό , ακόμη και για τους ανθρώπους ακριβώς που αρχίζουν στην ανάπτυξη Web . Οδηγίες
Η 1

Δημιουργία σελίδα HTML σας με τα στοιχεία για την εμφάνιση του περιεχομένου . Ανοίξτε ένα νέο αρχείο σε ένα πρόγραμμα επεξεργασίας κειμένου και αποθηκεύστε το με το " html ". Όπως η επέκταση , εισάγοντας τον ακόλουθο κώδικα :

Αυτό απλά δημιουργεί μια ιστοσελίδα με ένα μόνο στοιχείο HTML σε αυτό . Το στοιχείο έχει ανατεθεί ένα χαρακτηριστικό της κλάσης με το όνομα "off ". Αυτό δείχνει την κατάσταση του στοιχείου όταν ο χρήστης δεν έχει κέρσορα του ποντικιού του πάνω του. 2

Δημιουργία CSS κώδικα σας . Ανοίξτε ένα νέο αρχείο σε ένα πρόγραμμα επεξεργασίας κειμένου και αποθηκεύστε το ως " interactivestyle.css " για να αντανακλά το σκοπό της αποστολής που διεξάγονται . . Εισάγετε τον παρακάτω κωδικό :

off . {

Χρώμα : # FF0000 ? }

Πάνω από {

color: # 0000FF ? }

Προσθέστε μια σύνδεση με το αρχείο CSS σας στο τμήμα της κεφαλής της σελίδας HTML , ανάμεσα στο άνοιγμα και το κλείσιμο ετικέτες κεφάλι :

εικόνων 3

Δημιουργία δύο λειτουργίες JavaScript στο τμήμα της κεφαλής της σελίδας σας , είτε πριν είτε μετά την σύνδεση με το αρχείο CSS σας :

Προσθέστε την επιχείρηση type="text/javascript">

overElement λειτουργία ( elemRef ) {

//ποντίκι πάνω από το στοιχείο

}

offElement λειτουργία ( elemRef ) {

//ποντίκι είναι από το στοιχείο

}

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

Εντοπίστε τα στοιχεία μέσα σε συναρτήσεις JavaScript σας και να αλλάξετε χαρακτηριστικά όνομά τους τάξη . Alter δύο λειτουργίες JavaScript σας ως εξής :

overElement λειτουργία ( elemRef ) {

//ποντίκι πάνω από το στοιχείο

document.getElementById ( elemRef ) ClassName = " πάνω . " ? .

}

offElement λειτουργία ( elemRef ) {

//ποντίκι είναι από το στοιχείο

document.getElementById ( elemRef ) className = " off " ?

}

Αυτός ο κωδικός σε κάθε λειτουργία εντοπίζει για πρώτη φορά το εν λόγω στοιχείο με το όνομα χαρακτηριστικό της, η οποία έχει περάσει ως παράμετρος , τότε αλλάζει αναλόγως το όνομα της κλάσης
<. br > 5

λειτουργίες κλήσης σας μέσα στο περιεχόμενο HTML σας . Η σελίδα σας πρέπει να « ακούει » για την αλληλεπίδραση των χρηστών , καλώντας τις λειτουργίες JavaScript , όταν συμβεί αυτό . Alter HTML στοιχείο σας ως εξής :

Αυτό αναθέτει ένα αναγνωριστικό χαρακτηριστικό στο στοιχείο , τη διοχέτευση κάθε λειτουργία όταν ο χρήστης μετακινεί το ποντίκι του πάνω ή έξω από το χώρο . Αποθηκεύστε τα αρχεία σας και να ανοίξετε τη σελίδα HTML σε ένα πρόγραμμα περιήγησης στο Web , μετακινώντας το ποντίκι σας και έξω από το στοιχείο για να δοκιμάσετε τη λειτουργικότητα .
Η
εικόνων