كيفية تغيير فئة عنصر HTML باستخدام JavaScript؟

في مرحلة تصميم صفحة ويب أو موقع ويب ، هناك مواقف معينة لم تعد فيها بحاجة إلى الوصول إلى بعض العناصر المعينة بسبب بعض التحديثات. علاوة على ذلك ، عندما تكون هناك حاجة لتخصيص أكثر من فئة لعنصر معين في html. في مثل هذه السيناريوهات ، يعد تغيير فئة عنصر HTML في JavaScript مفيدًا للغاية لتلبية مثل هذه المواقف.

ستوضح هذه المدونة الأساليب التي يجب مراعاتها أثناء تغيير فئة عنصر HTML في JavaScript.

كيفية تغيير فئة عنصر HTML باستخدام JavaScript؟

لتغيير فئة عنصر HTML باستخدام JavaScript ، يمكن تطبيق الأساليب التالية:

• • ' اسم الطبقة ' منشأه.
  • ' قائمة الطبقة ' منشأه.

الأسلوب 1: تغيير فئة عنصر HTML باستخدام JavaScript باستخدام خاصية className

يمكن أن يدخل هذا النهج حيز التنفيذ من خلال الوصول إلى الفئة التي تم إنشاؤها المرتبطة بعنصر وتخصيص فئة مختلفة له.

يوضح المثال التالي المفهوم المذكور.

مثال

في الكود الوارد أدناه ضمن ' <الجسم> '، قم بتضمين العنوان التالي في'

' بطاقة شعار. بعد ذلك ، قم بإنشاء الزر المحدد الذي سيتم تعيينه افتراضيًا ' صف دراسي 'والتي سيتم تغييرها لاحقًا في الكود. أيضًا ، قم بتعيين ' هوية شخصية 'ومرفق' عند النقر 'استدعاء الدالة Class ().

لاحقًا في الرمز ، قم بتضمين الرسالة التالية في '

'لعرضها على DOM عند تحويل الفئة:

كود HTML:

< هيئة نمط = 'محاذاة النص: مركز ؛' >
< h2 > تغيير العنصر اسم الفصل الدراسي
ClickMe

اسم الفئة القديمة هو: الفئة الافتراضية

في كود JS ، أعلن عن وظيفة باسم ' فصل() '. هنا ، قم بالوصول إلى الفئة الافتراضية من خلال معرفها باستخدام ' document.getElementById () ' طريقة. ال ' اسم الطبقة 'ستحول الخاصية الفئة التي تم إنشاؤها إلى الفئة المسماة' صف جديد '.

وأخيرا، فإن ' النص الداخلي 'ستعرض الرسالة التالية مع الفئة التي تم تغييرها:

كود JS:

وظيفة فصل ( ) {
document.getElementById ( 'زر بلدي' ) .className = 'صف جديد' ؛
var access = document.getElementById ( 'زر بلدي' ) .className ؛
document.getElementById ( 'رأس' ) .innerHTML = 'اسم الفصل الجديد هو:' + الوصول ؛
}

انتاج |

في الإخراج أعلاه ، لاحظ تغيير ' صف دراسي 'على اليمين عند النقر على الزر في DOM.

الطريقة 2: تغيير فئة عنصر HTML باستخدام JavaScript باستخدام خاصية classList

يمكن تنفيذ هذا النهج الخاص لإزالة الفئة المحددة وتعيين فئة جديدة لها وبالتالي تغييرها.

مثال

أولاً ، كرر الطرق التي تمت مناقشتها أعلاه لتضمين العنوان ، وإنشاء زر بالفئة المعينة والمعرف وحدث onclick المرفق الذي يستدعي الوظيفة المحددة. بعد ذلك ، أضف بالمثل قسم العنوان في '

'لإعلام المستخدم بالفئة التي تم تغييرها عند النقر فوق الزر:

كود HTML

< هيئة نمط = 'محاذاة النص: مركز ؛' >
< h2 > تغيير فئة العنصر ! h2 >
< زر صف دراسي = 'موقع الكتروني' عند النقر = 'فصل()' هوية شخصية = 'يتغيرون' > انقر فوق لي زر >
< h3 هوية شخصية = 'رأس' نمط = 'لون الخلفية: lightgray ؛' > اسم الفئة القديمة هو: موقع الويب h3 >
هيئة >

الآن ، أعلن عن وظيفة باسم ' فصل() '. في تعريفه ، تطبيق ' قائمة الطبقة 'بالإضافة إلى' إزالة() 'لحذف الفئة التي تم الوصول إليها باسم' موقع الكتروني 'الذي يتوافق مع الزر الذي تم إنشاؤه.

في الخطوة التالية ، قم بتعيين فئة جديدة إلى نفس الفئة باستخدام الخاصية التي تمت مناقشتها مع ' يضيف() ' طريقة. أخيرًا ، اعرض الفئة التي تم تغييرها كما تمت مناقشته في النهج السابق:

كود شبيبة

وظيفة فصل ( ) {
document.getElementById ( 'يتغيرون' ) .classList.remove ( 'موقع الكتروني' )
document.getElementById ( 'يتغيرون' ) .classList.add ( 'Linux' ) ؛
var access = document.getElementById ( 'يتغيرون' ) .قائمة الطبقة؛
document.getElementById ( 'رأس' ) .innerHTML = 'اسم الفصل الجديد هو:' + الوصول ؛
}

انتاج |

تهدف هذه الكتابة إلى مسح مفهوم تغيير فئة عنصر HTML باستخدام JavaScript.

استنتاج

ال ' اسم الطبقة ' و ' قائمة الطبقة ”لتغيير فئة عنصر HTML. أدت خاصية className إلى اتباع نهج أسرع في تنفيذ المتطلبات المطلوبة مقارنة بخاصية classList لأنها تنطوي على تعقيد أقل للكود. من ناحية أخرى ، غيرت خاصية classList الفئة الافتراضية بمساعدة طريقتين إضافيتين. توضح هذه المقالة طرق تغيير فئة عنصر HTML باستخدام JavaScript.