מדריך זה יסביר את ההליך של הוספת מחלקה פעילה ב-JavaScript.
כיצד להוסיף מחלקה פעילה ב-JavaScript?
כדי להוסיף מחלקה פעילה, נשתמש בשיטות הבאות:
בואו נעבור לשיטה הראשונה!
שיטה 1: השתמש ב-document.getElementById() עם שיטה classList.add() להוספת מחלקה פעילה ב-JavaScript
ב-JavaScript, ה' document.getElementById() 'שיטה משמשת לגישה לרכיב מסוים על ידי המזהה שלו. עם זאת, הוא בוחר רק את האלמנטים על סמך המזהים שלהם, לא מחלקות. אתה יכול להשתמש בו עם ' classList.add() ' שיטה להוספת מחלקה פעילה ב-JavaScript.
בואו נחקור שיטה זו על ידי נטילת דוגמה.
דוגמא
בקובץ ה-HTML שלנו, ניקח את ' ' תג עם טקסט כלשהו, ציין את המזהה שלו כ' טקסט ', והוסיפו ' בלחיצה ' אירוע שיפעיל את ' לְהַפְעִיל() ' פונקציה. שימו לב, הוסף את התג
בתוך תג
: < p id = 'טקסט' בלחיצה = 'לְהַפְעִיל()' > לחץ כאן ע >בקובץ JavaScript, הגדר את הפונקציה activate() בצורה כזו שהיא תחילה ניגשת לרכיב הפסקה באמצעות המזהה שלו בשיטת document.getElementbyId() . לאחר מכן, הוסף מחלקת CSS לרשימת המחלקות שלה למטרות סטיילינג:
פונקציה להפעיל ( ) {
יש = מסמך. getElementById ( 'טקסט' ) ;
א. classList . לְהוֹסִיף ( 'מחלקה חדשה' ) ;
}
בקובץ ה-CSS, מקם נקודה לפני ' מחלקה חדשה ' ולהקצות את ' צבע רקע 'נכס ערך' תפוז ”:
. מחלקה חדשה {רקע כללי - צֶבַע : תפוז ;
}
כתוצאה מכך, כאשר תלחץ על רכיב הפסקה, תכונת הרקע שנוספה תחול עליו:
בואו נסתכל על השיטה הבאה שבה נשתמש ב-document.querySelector() כדי להוסיף מחלקה פעילה.
שיטה 2: השתמש ב-document.querySelector() עם שיטה classList.add() להוספת מחלקה פעילה ב-JavaScript
ב-JavaScript, ה' document.querySelector() השיטה משמשת כדי לקבל את האלמנט הראשון מהקוד. אתה יכול לציין מחלקות ומזהות הן בשיטת querySelector() . ניתן להשתמש בו עם ' classList.add() ' שיטה להוספת מחלקה פעילה ב-JavaScript.
דוגמא
כעת נשתמש רק ב' document.querySelector() 'עם תעודת זהות' #טקסט ' כדי לבחור את רכיב הפסקה. שוב, השיטה classList.add() תשמש כדי להוסיף את ה-active ' מחלקה חדשה ”:
פונקציה להפעיל ( ) {יש = מסמך. querySelector ( '#טקסט' ) ;
א. classList . לְהוֹסִיף ( 'מחלקה חדשה' ) ;
}
תְפוּקָה
למדנו שתי שיטות פשוטות ביותר להוספת מחלקה פעילה ב-JavaScript
סיכום
כדי להוסיף מחלקה פעילה, אנו יכולים להשתמש ב' getElementById() ' או ' querySelector() ' עם השיטה classList.add() . שתי השיטות שהוזכרו מקבלות תחילה אלמנטים לפי המזהה שלהן, ולאחר מכן באמצעות שיטת classList.add(), שם המחלקה החדש שהוקצה לרכיב שניתן להשתמש בו למטרות עיצוב. פוסט זה תיאר את ההליך הקשור להוספת מחלקה פעילה ב-JavaScript.