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

إنشاء مثيل في جافا

هنا، سنجري مناقشة مختصرة حول JavaScript classList ونناقش أيضًا أساليبها مع تطبيقاتها العملية.

مثال لخاصية JavaScript classList

فيما يلي مثال لخاصية JavaScript classList التي من خلالها سنحصل على قيمة فئة العنصر.

 <h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById(&apos;btn&apos;); alert(e.classList); } 

يظهر إخراج الكود أعلاه أدناه:

خاصية قائمة فئة جافا سكريبت

يتم استخدام الخاصية classList لتمثيل قيمة عناصر الفئة وهي a DOMTokenList هدف. إنها خاصية للقراءة فقط ولكن يمكننا تعديل قيمتها عن طريق معالجة الفئات المستخدمة في البرنامج. تتكون خاصية JavaScript classList من الطرق التالية التي يمكننا من خلالها إجراء عمليات مختلفة على عناصر الفئة:

يضيف():يتم استخدام طريقة add () لإضافة فئة واحدة أو أكثر إلى العنصر.يزيل():يتم استخدام طريقة الإزالة () لإزالة فئة واحدة أو أكثر من عدد الفئات الموجودة في العنصر.تبديل ():يتم استخدام طريقة toggle() لتبديل أسماء الفئات المحددة لعنصر ما. وهذا يعني أنه بنقرة واحدة تتم إضافة الفصل المحدد وبنقرة أخرى تتم إزالة الفصل. ومن المعروف باسم خاصية تبديل العنصر.يستبدل():يتم استخدام طريقة الاستبدال () لاستبدال فئة موجودة بفئة جديدة.يتضمن():يتم استخدام الطريقة التي تحتوي على () لخاصية JavaScript classList لإرجاع القيمة المنطقية كمخرجات. إذا كانت الفئة موجودة، فسيتم إرجاع القيمة كصحيح وإلا سيتم إرجاع كاذبة.غرض():يتم استخدام طريقة item() لعرض اسم الفئات في فهرس معين. وبالتالي، فإنه يقوم بإرجاع اسم الفئة.

هذه بعض الطرق المستخدمة في قائمة فئات JavaScript.

سنناقش واحدًا تلو الآخر.

لم يتم التعرف على جافاك

classList.add()

الوظيفة المستخدمة لإضافة فئة واحدة أو أكثر إلى عنصر CSS.

مثال:

يوضح المثال أدناه كيفية إضافة فصل دراسي باستخدام طريقة classList.add():

 .myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.add(&apos;myClass&apos;); } 

في الكود، عندما ينقر المستخدم على الزر، تتم إضافة الفصل الجديد مع الفئات الموجودة. يظهر الإخراج بعد النقر على الزر أدناه:

قائمة الفئات.إزالة()

يتم استخدام وظيفة الإزالة () لإزالة الفئات الموجودة من العناصر.

يوضح المثال أدناه كيفية إزالة فئة واحدة أو أكثر باستخدام طريقة classlist.remove():

 .myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.remove(&apos;myClass&apos;); } 

في الكود أعلاه، عندما ينقر المستخدم على الزر، تتم إزالة الفئة المحددة من فئات CSS الموجودة. يظهر الإخراج بعد النقر على الزر أدناه:

Classlist.toggle()

يتم استخدام زر toggle() لتبديل الفئات إلى العنصر. ويعني إضافة فئة جديدة أو إزالة الفئات الموجودة.

فيما يلي مثال سيجعلنا نفهم كيفية الاستفادة من طريقة toggle() لإضافة أو إزالة الفئات.

مثال:

 .myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById(&apos;Btn&apos;); e.classList.toggle(&apos;myClass2&apos;); } 

في الكود، عندما ينقر المستخدم على الزر، ستتم إضافة الفصل أو إزالته من فئات CSS. يظهر الإخراج بعد النقر على الزر أدناه:

الأعرج إزالة العلامة المائية

Classlist.contains()

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

فيما يلي مثال يوضح كيفية البحث عن فصل دراسي إذا كان موجودًا أم لا باستخدام طريقة يحتوي على () :

مثال:

 function getClass() { var e = document.getElementById(&apos;Btn&apos;); document.write(e.classList.contains(&apos;myClass&apos;)+&apos; <br>&apos;+&apos;myclass is the name of the class&apos;); } 

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

قائمة الفئات. استبدال ()

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

تحويل شار إلى جافا int

فيما يلي مثال سنفهم من خلاله كيف يمكننا استبدال صنف موجود بصنف جديد:

مثال:

 .myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } 

في الكود أعلاه، عندما ينقر المستخدم على الزر، يتم استبدال خصائص الفئة الحالية بخصائص الفئة الجديدة. يظهر الإخراج بعد النقر على الزر أدناه:

classList.item()

يتم استخدام الدالة item() لإرجاع اسم الفئة الموجودة عند قيمة الفهرس المحددة.

فيما يلي مثال سيجعلنا نفهم كيفية استخدام طريقة item() لإرجاع القيمة:

مثال:

المصفوفات في جافا

 <h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById(&apos;Btn&apos;); alert(e.classList.item(2)); } 

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

هذه بعض أساليب كائن DOM classList وكل ما يتعلق بـ classList.