JavaScript classList הוא מאפיין DOM של JavaScript המאפשר עיצוב מחלקות CSS (Cascading Style Sheet) של אלמנט. JavaScript classList הוא מאפיין לקריאה בלבד שמחזיר את שמות מחלקות ה-CSS. זהו מאפיין של JavaScript ביחס למאפיינים האחרים של JavaScript הכולל סגנון ו-className. המאפיין style מחזיר את הצבע או סגנון אחר של רכיב המחלקה CSS, ו-className משמש להחזרת שמות המחלקות המשמשות בקובץ ה-CSS. עם זאת, המאפיינים className ו-classList מחזירים את שם המחלקות בהן השתמשנו בקובץ ה-CSS אך בדרכים שונות. המאפיין className מחזיר את שם המחלקות בצורה של מחרוזת, ואילו המאפיין classList של JavaScript מחזירה את שם המחלקות בצורה של מערך.

כאן, ניקח דיון קצר על 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); } 

הפלט של הקוד לעיל מוצג להלן:

JavaScript classList Property

המאפיין classList משמש לייצוג הערך של רכיבי המחלקה שהוא a DOMTokenList לְהִתְנַגֵד. זהו מאפיין לקריאה בלבד אך אנו יכולים לשנות את ערכו על ידי מניפולציה של המחלקות המשמשות בתוכנית. מאפיין JavaScript classList מורכב מהשיטות הבאות שבאמצעותן נוכל לבצע פעולות שונות על רכיבי המחלקה:

css מודגש

לְהוֹסִיף():השיטה add() משמשת להוספת מחלקה אחת או יותר לאלמנט.לְהַסִיר():השיטה remove() משמשת להסרת מחלקה אחת או יותר ממספר המחלקות הקיימות באלמנט.לְמַתֵג():השיטה toggle() משמשת להחלפת שמות המחלקות שצוינו של אלמנט. זה אומר שבלחיצה אחת הכיתה המצוינת מתווספת ובלחיצה אחרת הכיתה מוסרת. זה ידוע בתור תכונת ה-toggle של אלמנט.החלף():השיטה replace() משמשת להחלפת מחלקה קיימת במחלקה חדשה.מכיל():השיטה contains() של המאפיין JavaScript classList משמשת להחזרת הערך הבולאני כפלט. אם המחלקה קיימת, הערך מוחזר כ-true, אחרת false מוחזר.פריט():שיטת item() משמשת להצגת שם המחלקות באינדקס המסוים. לפיכך, הוא מחזיר את שם המחלקה.

אלו הן חלק מהשיטות המשמשות ב- JavaScript classList.

נדון בזה אחר זה.

classList.add()

הפונקציה המשמשת להוספת מחלקה אחת או יותר לאלמנט ה-CSS.

דוגמא:

פורמט מחרוזת java ארוך

הדוגמה למטה מראה כיצד להוסיף מחלקה באמצעות שיטת 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()

הפונקציה remove() משמשת להסרת המחלקות הקיימות מהאלמנטים.

הדוגמה למטה מראה כיצד להסיר מחלקה אחת או יותר באמצעות שיטת 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()

השיטה contains() משמשת כדי לבדוק האם המחלקה שצוינה קיימת במחלקות ה-CSS וביחס אליה, היא מחזירה את הערך הבולאני כ-true או false.

להלן דוגמה שמראה כיצד לחפש מחלקה אם היא קיימת או לא באמצעות המתודה contains():

דוגמא:

 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. אם הוא קיים, יוחזר ערך בוליאני כ-true. אחרת, זה יחזור שקר. הפלט של הקוד לעיל לאחר לחיצה על הכפתור מוצג להלן:

classlist.replace()

השיטה replace() משמשת להחלפת מחלקה קיימת במחלקה חדשה. זה לא אומר שהמחלקה מוסרת מהאלמנטים אבל המאפיינים של המחלקה הקיימת מוחלפים במאפיינים של המחלקה החדשה.

המרת מחרוזת ל-enum

להלן דוגמה שדרכה נבין כיצד נוכל להחליף מחלקה קיימת במחלקה חדשה:

דוגמא:

 .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)); } 

בקוד, כאשר המשתמש ילחץ על הכפתור, תוצג המחלקה הקיימת באינדקס שצוין. לאחר לחיצה על הכפתור, נקבל את ערך מחלקת האינדקס שצוין, כפי שמוצג להלן:

אלו הן חלק מהשיטות של אובייקט classList DOM והכל על classList.