Αυτή η ανάρτηση θα απεικονίσει τη διαδικασία για να ορίσετε τα πολλαπλά χαρακτηριστικά σε ένα στοιχείο HTML χρησιμοποιώντας JavaScript.
Πώς να ορίσετε πολλαπλά χαρακτηριστικά σε ένα στοιχείο χρησιμοποιώντας JavaScript;
Για να ορίσετε πολλά χαρακτηριστικά σε ένα στοιχείο ταυτόχρονα, πρώτα, δημιουργήστε ένα αντικείμενο με τα ονόματα και τις τιμές των χαρακτηριστικών. Λάβετε μια λίστα με τα κλειδιά του αντικειμένου ως πίνακα με το ' Object.keys() ', στη συνέχεια, ορίστε όλα τα χαρακτηριστικά στο καθορισμένο στοιχείο HTML με το ' setAttribute() 'μέθοδος.
Σύνταξη
Η δεδομένη σύνταξη χρησιμοποιείται για τη μέθοδο setAttribute():
στοιχείο. setAttribute ( attrName, attrValue ) ;
Η παραπάνω σύνταξη περιέχει δύο παραμέτρους: όνομα ' και ' αξία '.
- ' attrName ” είναι το όνομα του νέου χαρακτηριστικού.
- ' attrValue ” είναι η τιμή του νέου χαρακτηριστικού.
- Αυτή η μέθοδος θα δημιουργήσει ένα νέο χαρακτηριστικό και θα του εκχωρήσει μια τιμή. Εάν το καθορισμένο χαρακτηριστικό υπάρχει ήδη, τότε η τιμή του θα ενημερωθεί.
Χρησιμοποιήστε τη δεδομένη σύνταξη για τη μέθοδο Object.keys():
Αντικείμενο . κλειδιά ( αντικείμενο )Επιστρέφει έναν πίνακα ενός δεδομένου αντικειμένου.
Παράδειγμα 1: Ορισμός πολλαπλών χαρακτηριστικών σε ένα στοιχείο χρησιμοποιώντας τη μέθοδο forEach() με τη μέθοδο setAttribute()
Αρχικά, δημιουργήστε ένα στοιχείο στο αρχείο HTML:
< αναγνωριστικό κουμπιού = 'κουμπί' > LINUXHINT κουμπί >Επί του παρόντος, η ιστοσελίδα θα μοιάζει με αυτό:
Στον κώδικα JavaScript, πρώτα, δημιουργήστε ένα αντικείμενο με το όνομα ' στοιχείο Ιδιότητες ” και προσθέστε τα χαρακτηριστικά με ονόματα και τιμές στο αντικείμενο. Εδώ, θα προσθέσουμε το χαρακτηριστικό style, το όνομα του στοιχείου και την ιδιότητα απενεργοποίησης για το στοιχείο κουμπί:
συνθ στοιχείο Ιδιότητες = {στυλ : 'χρώμα φόντου: rgb(153, 28, 49); άσπρο χρώμα;' ,
όνομα : 'LinuxButton' ,
άτομα με ειδικές ανάγκες : '' ,
} ;
Τώρα, ορίστε μια συνάρτηση με το όνομα ' setMultipleAttributesonElement 'όπου καλέστε πρώτα το ' Object.keys() ' μέθοδος για να λάβετε τον πίνακα των πλήκτρων του αντικειμένου και στη συνέχεια να χρησιμοποιήσετε το ' για κάθε() ' μέθοδος για επανάληψη μέσω του πίνακα και τελικά κλήση του ' setAttribute() ' μέθοδος για να ορίσετε όλα τα καθορισμένα χαρακτηριστικά στο καθορισμένο στοιχείο HTML.
συνάρτηση setMultipleAttributesonElement ( στοιχείο, στοιχείοΧαρακτηριστικά ) {Αντικείμενο . κλειδιά ( στοιχείο Ιδιότητες ) . για κάθε ( Χαρακτηριστικό => {
στοιχείο. setAttribute ( χαρακτηριστικό, elemAttributes [ Χαρακτηριστικό ] ) ;
} ) ;
}
Λήψη του κουμπιού χρησιμοποιώντας το αναγνωριστικό που του έχει εκχωρηθεί με τη βοήθεια του ' getElementById() 'μέθοδος:
συνθ κουμπί = έγγραφο. getElementById ( 'κουμπί' ) ;Επίκληση της καθορισμένης συνάρτησης ' setMultipleAttributesonElement ” και περάστε το στοιχείο ως πρώτο όρισμα και το αντικείμενο των χαρακτηριστικών ως δεύτερο όρισμα:
setMultipleAttributesonElement ( κουμπί, στοιχείο Ιδιότητες ) ;Η έξοδος δείχνει ότι τα πολλαπλά χαρακτηριστικά ενός κουμπιού προστέθηκαν με επιτυχία:
Μπορείτε επίσης να ορίσετε πολλά χαρακτηριστικά σε ένα στοιχείο χωρίς να δημιουργήσετε ξεχωριστό αντικείμενο για τα χαρακτηριστικά. Για να το κάνετε αυτό, ακολουθήστε το παρακάτω παράδειγμα.
Παράδειγμα 2: Ορισμός πολλαπλών χαρακτηριστικών σε ένα στοιχείο χρησιμοποιώντας το for Loop με τη μέθοδο setAttribute()
Ορίστε μια συνάρτηση με δύο παραμέτρους σε ένα αρχείο JavaScript και χρησιμοποιήστε έναν βρόχο for για να ορίσετε πολλά χαρακτηριστικά μέσα σε αυτό καλώντας το ' setAttribute() 'μέθοδος:
συνάρτηση setMultipleAttributesonElement ( στοιχείο, στοιχείοΧαρακτηριστικά ) {Για ( επιτρέψτε μου στο elemAttributes ) {
στοιχείο. setAttribute ( i, elemAttributes [ Εγώ ] ) ;
}
}
Ανακτήστε το κουμπί χρησιμοποιώντας το αναγνωριστικό που έχει εκχωρηθεί:
συνθ κουμπί = έγγραφο. getElementById ( 'κουμπί' ) ;Καλέστε την καθορισμένη συνάρτηση περνώντας το στοιχείο του κουμπιού και πολλά χαρακτηριστικά με τη μορφή ζευγών ονόματος-τιμής:
setMultipleAttributesonElement ( κουμπί, { 'στυλ' : 'χρώμα φόντου: rgb(153, 28, 49); χρώμα: λευκό;' , 'άτομα με ειδικές ανάγκες' : '' , 'όνομα' : 'LinuxButton' } ) ;Παραγωγή
Έχουμε συγκεντρώσει όλες τις βασικές πληροφορίες που σχετίζονται με τη ρύθμιση των πολλαπλών χαρακτηριστικών σε ένα στοιχείο HTML χρησιμοποιώντας JavaScript.
συμπέρασμα
Το JavaScript προκαθορισμένο setAttribute() Η μέθοδος ' χρησιμοποιείται για τον ορισμό μεμονωμένων ή πολλαπλών χαρακτηριστικών για ένα στοιχείο. Για να ορίσετε τα πολλαπλά χαρακτηριστικά σε ένα στοιχείο, πρώτα, δημιουργήστε ένα αντικείμενο που περιέχει χαρακτηριστικά με τη μορφή ονομάτων-τιμών. Λάβετε τα κλειδιά των αντικειμένων σε έναν πίνακα χρησιμοποιώντας το ' Object.keys() ', στη συνέχεια ορίστε όλα τα χαρακτηριστικά στα καθορισμένα στοιχεία με το ' setAttribute() 'μέθοδος. Σε αυτήν την ανάρτηση, παρουσιάσαμε τη διαδικασία ορισμού πολλαπλών χαρακτηριστικών σε ένα στοιχείο HTML χρησιμοποιώντας JavaScript.