سيوضح هذا المنشور الإجراء الخاص بتعيين السمات المتعددة على عنصر HTML باستخدام JavaScript.
كيفية تعيين سمات متعددة على عنصر باستخدام JavaScript؟
لتعيين سمات متعددة على عنصر في وقت واحد ، قم أولاً بإنشاء كائن بأسماء السمات والقيم. احصل على قائمة بمفاتيح الكائن كمصفوفة تحتوي على ' Object.keys () '، ثم قم بتعيين جميع السمات على عنصر HTML المحدد باستخدام' setAttribute () ' طريقة.
بناء الجملة
تُستخدم الصيغة المحددة لطريقة setAttribute ():
عنصر. تعيين السمة ( attrName ، attrValue ) ؛
تحتوي الصيغة أعلاه على معلمتين: ' اسم ' و ' القيمة '.
- ' AttrName 'هو اسم السمة الجديدة.
- ' AttrValue 'هي قيمة السمة الجديدة.
- ستنشئ هذه الطريقة سمة جديدة وتعيين قيمة لها. إذا كانت السمة المحددة موجودة بالفعل ، فسيتم تحديث قيمتها.
استخدم بناء الجملة المحدد لطريقة Object.keys ():
هدف . مفاتيح ( هدف )تقوم بإرجاع مصفوفة من كائن معين.
مثال 1: تعيين سمات متعددة على عنصر باستخدام طريقة forEach () مع طريقة setAttribute ()
أولاً ، قم بإنشاء عنصر في ملف HTML:
< معرف الزر = 'زر' > لينوكسينت زر >ستبدو صفحة الويب حاليًا كما يلي:
في تعليمات JavaScript البرمجية ، أنشئ أولاً كائنًا باسم ' العنصرالسمات 'وإضافة السمات مع الأسماء والقيم إلى الكائن. سنضيف هنا سمة النمط واسم العنصر وخاصية التعطيل لعنصر الزر:
مقدار ثابت العنصرالسمات = {نمط : لون الخلفية: rgb (153 ، 28 ، 49) ؛ اللون الابيض؛' و
اسم : 'LinuxButton' و
معاق : ' و
} ؛
الآن ، حدد وظيفة باسم ' setMultipleAttributesonElement 'حيث يتم الاتصال أولاً بـ' Object.keys () 'للحصول على مصفوفة مفاتيح الكائن ثم استخدام' لكل () 'للتكرار خلال المصفوفة واستدعاء' setAttribute () ”لتعيين جميع السمات المحددة على عنصر HTML المحدد.
وظيفة setMultipleAttributesonElement ( عنصر ، elementAttributes ) {هدف . مفاتيح ( العنصرالسمات ) . لكل ( ينسب => {
عنصر. تعيين السمة ( السمة ، السمات [ ينسب ] ) ؛
} ) ؛
}
أحضر الزر باستخدام المعرف المخصص له بمساعدة ' getElementById () ' طريقة:
مقدار ثابت زر = وثيقة. getElementById ( 'زر' ) ؛استدعاء الوظيفة المحددة ' setMultipleAttributesonElement 'وتمرير العنصر باعتباره الوسيطة الأولى وموضوع السمات باعتباره الوسيطة الثانية:
setMultipleAttributesonElement ( زر ، elementAttributes ) ؛يوضح الناتج أنه تمت إضافة السمات المتعددة للزر بنجاح:
يمكنك أيضًا تعيين سمات متعددة على عنصر ما دون إنشاء كائن منفصل للسمات. للقيام بذلك ، اتبع المثال أدناه.
مثال 2: تعيين سمات متعددة على عنصر باستخدام التكرار باستخدام أسلوب setAttribute ()
حدد دالة ذات معلمتين في ملف JavaScript واستخدم حلقة for لتعيين سمات متعددة بداخلها عن طريق استدعاء ' setAttribute () ' طريقة:
وظيفة setMultipleAttributesonElement ( عنصر ، elementAttributes ) {إلى عن على ( اسمحوا لي أن في السمات ) {
عنصر. تعيين السمة ( أنا ، السمات [ أنا ] ) ؛
}
}
استرجع الزر باستخدام المعرف المخصص له:
مقدار ثابت زر = وثيقة. getElementById ( 'زر' ) ؛قم باستدعاء الوظيفة المحددة بتمرير عنصر الزر والسمات المتعددة في شكل أزواج من الاسم والقيمة:
setMultipleAttributesonElement ( زر، { 'نمط' : 'لون الخلفية: RGB (153 ، 28 ، 49) ؛ اللون: أبيض ؛' و 'معاق' : '' و 'اسم' : 'LinuxButton' } ) ؛انتاج |
قمنا بتجميع جميع المعلومات الأساسية المتعلقة بتعيين السمات المتعددة على عنصر HTML باستخدام JavaScript.
استنتاج
تم تعريف JavaScript مسبقًا setAttribute () تستخدم طريقة 'لتعيين سمات مفردة أو متعددة لعنصر. لتعيين سمات متعددة على عنصر ما ، أولاً ، قم بإنشاء كائن يحتوي على سمات في شكل قيم الأسماء. احصل على مفاتيح العناصر في مصفوفة باستخدام ' Object.keys () '، ثم عيّن جميع السمات على العناصر المحددة باستخدام' setAttribute () ' طريقة. في هذا المنشور ، أوضحنا الإجراء الخاص بتعيين سمات متعددة على عنصر HTML باستخدام JavaScript.