כיצד לשנות את המחלקה של רכיב HTML עם JavaScript?

בשלב של עיצוב דף אינטרנט או אתר אינטרנט, ישנם מצבים מסוימים שבהם אינך צריך יותר לגשת לאלמנטים מסוימים עקב עדכון כלשהו. יתרה מכך, כאשר יש צורך להקצות יותר ממחלקה אחת לאלמנט ספציפי ב-html. בתרחישי מקרים כאלה, שינוי המעמד של רכיב HTML ב-JavaScript הוא לעזר רב כדי להתמודד עם מצבים כאלה.

בלוג זה ידגים את הגישות שיש לשקול בעת שינוי המחלקה של רכיב HTML ב-JavaScript.

כיצד לשנות את המחלקה של רכיב HTML עם JavaScript?

כדי לשנות את המחלקה של רכיב HTML עם JavaScript, ניתן ליישם את הגישות הבאות:

• • ' className ' תכונה.
  • ' classList ' תכונה.

גישה 1: שנה את המחלקה של רכיב HTML עם JavaScript באמצעות מאפיין className

גישה זו יכולה להיכנס לתוקף על ידי גישה למחלקה שנוצרה המשויכת לאלמנט והקצאה לו מחלקה אחרת.

הדוגמה הבאה מדגימה את המושג המוצהר.

דוגמא

בקוד הנתון להלן בתוך ' <גוף> ', כלול את הכותרת הבאה ב'

'תג. לאחר מכן, צור את הכפתור שצוין שיוקצה לו ברירת מחדל ' מעמד ' אשר ישתנה בהמשך הקוד. כמו כן, הקצה לו ' תְעוּדַת זֶהוּת ' ומצורפת ' בלחיצה ” אירוע המפעיל את הפונקציה Class().

בהמשך הקוד, כלול את ההודעה הבאה ב-'

' תג כדי להציג אותו ב-DOM עם שינוי המחלקה:

קוד HTML:

< גוּף סִגְנוֹן = 'טקסט-align: center;' >
< h2 > שנה אלמנט שם הכיתה של

שם הכיתה הישן הוא: מחלקת ברירת מחדל

בקוד JS, הכריז על פונקציה בשם ' מעמד() '. כאן, גש למחלקת ברירת המחדל לפי המזהה שלה באמצעות ' document.getElementById() ' שיטה. ה ' className ' המאפיין יהפוך את המחלקה שנוצרה למחלקה בשם ' newClass '.

סוף - סוף, ה ' innerText ' מאפיין יציג את ההודעה הבאה יחד עם המחלקה שהשתנתה:

קוד JS:

תְפוּקָה

בפלט לעיל, שים לב לשינוי של ' מעמד ' מימין בלחיצה על הכפתור ב-DOM.

גישה 2: שנה את המחלקה של רכיב HTML עם JavaScript באמצעות מאפיין classList

ניתן ליישם גישה מסוימת זו כדי להסיר את המחלקה שצוינה ולהקצות לה מחלקה חדשה ובכך לשנות אותה.

דוגמא

ראשית, חזור על השיטות שנדונו לעיל להכללת כותרת, יצירת כפתור עם המחלקה, המזהה והאירוע המצורף onclick המעורר את הפונקציה שצוינה. לאחר מכן, הוסף באופן דומה את קטע הכותרת ב'

' תג כדי להודיע ​​למשתמש על המחלקה שהשתנתה בלחיצה על הכפתור:

קוד HTML

< גוּף סִגְנוֹן = 'טקסט-align: center;' >
< h2 > שנה מחלקה של אלמנט ! h2 >
< לַחְצָן מעמד = 'אתר אינטרנט' בלחיצה = 'מעמד()' תְעוּדַת זֶהוּת = 'שינוי' > לחץ עלי לַחְצָן >
< h3 תְעוּדַת זֶהוּת = 'רֹאשׁ' סִגְנוֹן = 'צבע רקע: אפור בהיר;' > שם הכיתה הישן הוא: אתר אינטרנט h3 >
גוּף >

כעת, הכריז על פונקציה בשם ' מעמד() '. בהגדרתו, החל את ' classList ' נכס יחד עם ' לְהַסִיר() שיטה להשמיט את המחלקה שנגישה בשם ' אתר אינטרנט ” שמתאים לכפתור שנוצר.

בשלב הבא, הקצה מחלקה חדשה לאותה מחלקה באמצעות המאפיין שנדון עם ה-' לְהוֹסִיף() ' שיטה. לבסוף, הצג את המחלקה שהשתנתה כפי שנדון בגישה הקודמת:

קוד JS

פוּנקצִיָה מעמד ( ) {
document.getElementById ( 'שינוי' ) .classList.remove ( 'אתר אינטרנט' )
document.getElementById ( 'שינוי' ) ‎.classList.add ( 'לינוקס' ) ;
var access = document.getElementById ( 'שינוי' ) ‎.classList;
document.getElementById ( 'רֹאשׁ' ) .innerHTML = 'שם הכיתה החדש הוא:' + גישה;
}

תְפוּקָה

כתיבה זו אמורה לנקות את הרעיון של שינוי המחלקה של רכיב ה-HTML באמצעות JavaScript.

סיכום

ה ' className ' ו' classList ניתן להשתמש במאפיינים כדי לשנות את המחלקה של רכיב HTML. המאפיין className הוביל לגישה מהירה יותר בביצוע הדרישה הרצויה בהשוואה למאפיין classList שכן הוא כלל פחות מורכבות קוד. מאפיין classList, לעומת זאת, שינה את מחלקת ברירת המחדל בעזרת שתי שיטות נוספות. מאמר זה המחיש את הגישות לשינוי המחלקה של רכיב HTML עם JavaScript.