يمكن استخدام سمة الفئة في CSS للقيام ببعض المهام للعناصر ذات اسم الفئة المقابل. في هذه المقالة، نناقش كيفية إضافة فئة إلى عنصر باستخدام JavaScript. في جافا سكريبت ، هناك بعض الطرق لإضافة فئة إلى عنصر. يمكننا استخدام .className الملكية أو .يضيف() طريقة لإضافة اسم فئة إلى عنصر معين.

الآن، دعونا نناقش طرق إضافة فئة إلى عنصر.

باستخدام خاصية .className

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

لإضافة فئات متعددة، علينا فصل أسمائهم بمسافة مثل 'الفئة 1 الفئة 2' .

إذا تم بالفعل الإعلان عن فئة لعنصر ما، ونحتاج إلى إضافة اسم فئة جديد إلى نفس العنصر، فيجب الإعلان عنه عن طريق إدراج مسافة قبل كتابة اسم الفئة الجديد وإلا فسيتم استبدال اسم الفئة الموجود. ويمكن كتابتها على النحو التالي:

 document.getElementById('div1').className = ' newClass'; 

في الكود أعلاه، قمنا بإدخال مسافة من قبل صف جديد .

بناء الجملة

بناء جملة هذه الخاصية شائع الاستخدام لتعيين اسم الفئة أو إرجاعه موضح أدناه.

لتعيين اسم الفئة

 element.className = class 

لإرجاع اسم الفئة

 element.className 

مثال استخدام .className يتم إعطاء الملكية على النحو التالي.

مثال - إضافة اسم الفئة

في هذا المثال نستخدم .className خاصية إضافة 'ل' فئة إلى عنصر الفقرة وجود معرف 'ص1' . نحن نقوم بتطبيق CSS على الفقرة المقابلة باستخدام اسم الفئة 'ل' .

لدينا للنقر على المعطى زر HTML 'إضافة فئة' لرؤية التأثير.

 add class name using JavaScript .para { font-size: 30px; background-color: yellow; color: blue; border: 2px dotted red; } <p id="p1"> Welcome to the javaTpoint.com </p> <p> Click the following button to see the effect. </p> Add Class function fun() { var a = document.getElementById(&apos;p1&apos;); a.classList.add(&apos;para&apos;); } 

انتاج |

بعد النقر على الزر المحدد، سيكون الإخراج -