ניתן להשתמש בתכונה class ב-CSS כדי לבצע כמה משימות עבור האלמנטים עם שם המחלקה התואם. במאמר זה, אנו דנים כיצד להוסיף מחלקה לרכיב באמצעות JavaScript. ב JavaScript , יש כמה גישות להוספת מחלקה לאלמנט. אנחנו יכולים להשתמש ב .className רכוש או ה .לְהוֹסִיף() שיטה להוספת שם מחלקה לאלמנט המסוים.
כעת, בואו נדון בגישות להוספת מחלקה לאלמנט.
שימוש במאפיין .className
ה .className מאפיין מגדיר את שם המחלקה של אלמנט. ניתן להשתמש במאפיין זה כדי להחזיר את הערך של תכונת המחלקה של אלמנט. אנו יכולים להשתמש במאפיין זה כדי להוסיף מחלקה לרכיב HTML מבלי להחליף את המחלקה הקיימת שלו.
כדי להוסיף מחלקות מרובות, עלינו להפריד את שמם עם רווח כגון 'class1 class2' .
אם כבר הוכרזה מחלקה עבור אלמנט, ואנו צריכים להוסיף שם מחלקה חדש לאותו אלמנט, יש להכריז עליו על ידי הוספת רווח לפני כתיבת שם המחלקה החדשה אחרת, זה ידרוס את שם המחלקה הקיימת. ניתן לכתוב זאת כך:
document.getElementById('div1').className = ' newClass';
בקוד לעיל, הכנסנו רווח בעבר newClass .
תחביר
התחביר הנפוץ של מאפיין זה כדי להגדיר או להחזיר את שם המחלקה ניתן להלן.
כדי להגדיר את שם הכיתה
element.className = class
להחזרת שם הכיתה
element.className
הדוגמה לשימוש ב- .className הנכס ניתן כדלקמן.
דוגמה - הוספת שם הכיתה
בדוגמה זו אנו משתמשים ב- .className נכס להוספת ה 'ל' class לרכיב הפסקה בעל id 'p1' . אנו מיישמים את ה-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('p1'); a.classList.add('para'); } בדוק את זה עכשיו תְפוּקָה
לאחר לחיצה על הכפתור הנתון, הפלט יהיה -
