פוסט זה ימחיש את ההליך להגדרת התכונות המרובות ברכיב HTML באמצעות JavaScript.
כיצד להגדיר תכונות מרובות ברכיב באמצעות JavaScript?
כדי להגדיר מספר תכונות ברכיב בו-זמנית, ראשית, צור אובייקט עם שמות המאפיינים והערכים. קבל רשימה של מפתחות האובייקט כמערך עם ' Object.keys() שיטת ', לאחר מכן, הגדר את כל התכונות ברכיב ה-HTML שצוין עם ' setAttribute() ' שיטה.
תחביר
התחביר הנתון משמש עבור שיטת setAttribute():
אֵלֵמֶנט. setAttribute ( attrName, attrValue ) ;
התחביר לעיל מכיל שני פרמטרים: ' שֵׁם ' ו' ערך '.
- ' attrName ' הוא השם של התכונה החדשה.
- ' attrValue ” הוא הערך של התכונה החדשה.
- שיטה זו תיצור תכונה חדשה ותקצה לה ערך. אם התכונה שצוינה כבר קיימת, הערך שלה יעודכן.
השתמש בתחביר הנתון עבור שיטת Object.keys():
לְהִתְנַגֵד . מפתחות ( לְהִתְנַגֵד )הוא מחזיר מערך של אובייקט נתון.
דוגמה 1: הגדר תכונות מרובות באלמנט באמצעות שיטת forEach() עם שיטת setAttribute()
ראשית, צור אלמנט בקובץ ה-HTML:
< מזהה כפתור = 'לַחְצָן' > LINUXHINT לַחְצָן >נכון לעכשיו, דף האינטרנט ייראה כך:
בקוד JavaScript, ראשית, צור אובייקט בשם ' elementAttributes ולהוסיף את התכונות עם שמות וערכים לאובייקט. כאן נוסיף את תכונת הסגנון, שם האלמנט ואת המאפיין disable עבור רכיב הלחצן:
const elementAttributes = {סִגְנוֹן : 'צבע רקע: rgb(153, 28, 49); צבע לבן;' ,
שֵׁם : 'לחצן לינוקס' ,
נָכֶה : '' ,
} ;
כעת, הגדר פונקציה בשם ' setMultipleAttributesonElement ' שבו תקרא תחילה את ' Object.keys() שיטת ' לקבלת מערך המפתחות של האובייקט ולאחר מכן להשתמש ב-' לכל אחד() שיטת 'לחזור על המערך ולבסוף לקרוא ל' setAttribute() ' שיטה להגדיר את כל התכונות המוגדרות ברכיב ה-HTML שצוין.
הפונקציה setMultipleAttributesonElement ( element, elementAttributes ) {לְהִתְנַגֵד . מפתחות ( elementAttributes ) . לכל אחד ( תְכוּנָה => {
אֵלֵמֶנט. setAttribute ( תכונה, elemAttributes [ תְכוּנָה ] ) ;
} ) ;
}
אחזר את הכפתור באמצעות המזהה שהוקצה לו בעזרת ' getElementById() ' שיטה:
const לַחְצָן = מסמך. getElementById ( 'לַחְצָן' ) ;הפעל את הפונקציה המוגדרת ' setMultipleAttributesonElement ' והעבירו את האלמנט כארגומנט הראשון ואת אובייקט התכונות כארגומנט השני:
setMultipleAttributesonElement ( button, elementAttributes ) ;הפלט מראה שהתכונות המרובות של כפתור נוספו בהצלחה:
אתה יכול גם להגדיר תכונות מרובות ברכיב מבלי ליצור אובייקט נפרד עבור התכונות. כדי לעשות זאת, עקוב אחר הדוגמה שלהלן.
דוגמה 2: הגדר תכונות מרובות באלמנט באמצעות לולאה עם שיטת setAttribute()
הגדר פונקציה עם שני פרמטרים בקובץ JavaScript והשתמש בלולאת for כדי להגדיר בתוכו תכונות מרובות על ידי קריאה ל' setAttribute() ' שיטה:
הפונקציה setMultipleAttributesonElement ( element, elementAttributes ) {ל ( תן לי להיכנס elemAttributes ) {
אֵלֵמֶנט. setAttribute ( i, elemAttributes [ אני ] ) ;
}
}
אחזר את הכפתור באמצעות המזהה שהוקצה לו:
const לַחְצָן = מסמך. getElementById ( 'לַחְצָן' ) ;קרא לפונקציה המוגדרת על ידי העברת רכיב הכפתור ותכונות מרובות בצורה של צמדי שם-ערך:
setMultipleAttributesonElement ( לַחְצָן, { 'סִגְנוֹן' : 'צבע רקע: rgb(153, 28, 49); צבע: לבן;' , 'נָכֶה' : '' , 'שֵׁם' : 'לחצן לינוקס' } ) ;תְפוּקָה
ריכזנו את כל המידע החיוני הקשור להגדרת התכונות המרובות ברכיב HTML באמצעות JavaScript.
סיכום
JavaScript מוגדר מראש setAttribute() השיטה משמשת להגדרת תכונות בודדות או מרובות עבור אלמנט. כדי להגדיר את התכונות המרובות באלמנט, ראשית, צור אובייקט המכיל תכונות בצורה של שמות-ערכים. קבל את המפתחות של אובייקטים במערך באמצעות ' Object.keys() שיטת ', ולאחר מכן הגדר את כל התכונות באלמנטים שצוינו עם ' setAttribute() ' שיטה. בפוסט זה, הדגמנו את ההליך להגדיר תכונות מרובות ברכיב HTML באמצעות JavaScript.