מאמר זה יתאר את השיטות להוספת CSS עם JavaScript.
כיצד להוסיף CSS עם JavaScript?
ב-JavaScript, אתה יכול להוסיף סגנונות CSS לרכיב על ידי שינוי מאפיין הסגנון שלו באמצעות השיטות או הגישות הבאות:
שיטה 1: הוסף CSS עם JavaScript באמצעות מאפיין 'סגנון'.
להוספת CSS ב-JavaScript, השתמש ב-' סִגְנוֹן ' תכונה. הוא משמש כדי לגשת ולתפעל את הסגנונות המוטבעים של אלמנט. זה נותן אובייקט המייצג את הסגנונות המוטבעים של אלמנט ומאפשר לקבל או להגדיר מאפייני סגנון בודדים.
תחביר
להוספת סגנון CSS ב-JavaScript, התחביר הבא משמש עבור ' סִגְנוֹן ' תכונה:
אֵלֵמֶנט. סִגְנוֹן ;
כאן, ' אֵלֵמֶנט ” הוא הפניה לרכיב HTML.
דוגמא
בדוגמה הבאה, נעצב את הכפתורים באמצעות JavaScript. ראשית, ניצור שלושה כפתורים ונקצה להם מזהים, מה שעוזר לגשת לרכיבי הכפתור לעיצוב:
< מזהה כפתור = 'btn2' > לִדחוֹת לַחְצָן >
< מזהה כפתור = 'btn3' > לְקַבֵּל לַחְצָן >
לפני העיצוב הפלט ייראה כך:
כעת, בואו נעצב את הכפתורים האלה ב-JavaScript באמצעות ה-' סִגְנוֹן ' תכונה. ראשית, קבל את כל רכיבי הכפתור באמצעות המזהים שהוקצו להם בעזרת ' getElementById() ' שיטה:
תן להסכים = מסמך. getElementById ( 'btn1' ) ;לתת לדחות = מסמך. getElementById ( 'btn2' ) ;
לתת לקבל = מסמך. getElementById ( 'btn3' ) ;
הגדר את צבעי הרקע של כל הכפתורים הללו באמצעות ' סִגְנוֹן ' תכונה:
לְהַסכִּים. סִגְנוֹן . צבע רקע = 'ירוק' ;לִדחוֹת. סִגְנוֹן . צבע רקע = 'אָדוֹם' ;
לְקַבֵּל. סִגְנוֹן . צבע רקע = 'צהוב' ;
כפי שאתה יכול לראות, הכפתורים עוצבו בהצלחה באמצעות ' סִגְנוֹן ' תכונה:
שיטה 2: הוסף CSS עם JavaScript באמצעות שיטת 'setAttribute()'.
כדי להוסיף סגנון CSS ב-JavaScript, השתמש ב-' setAttribute() ' שיטה. הוא משמש כדי להגדיר או להוסיף תכונה והערך שלה לרכיב HTML.
תחביר
התחביר הבא משמש עבור ' setAttribute() ' שיטה:
דוגמא
כאן, נגדיר את הסגנונות השונים על הכפתורים ב-JavaScript באמצעות ' setAttribute() ' שיטה. הגדר את רדיוס הגבול של כל הלחצנים ל' .5 רמ ', וצבע הטקסט של ' לְהַסכִּים ' ו' לִדחוֹת 'כפתורים ל' לבן '.
לִדחוֹת. setAttribute ( 'סִגְנוֹן' , 'צבע רקע: אדום; צבע: לבן; רדיוס גבול: .5rem;' ) ;
לְקַבֵּל. setAttribute ( 'סִגְנוֹן' , 'צבע רקע: צהוב; רדיוס גבול: .5rem;' ) ;
תְפוּקָה
שיטה 3: הוסף CSS עם JavaScript באמצעות שיטת 'createElement()'.
אם ברצונך ליצור מחלקות או מזהים בעיצוב JavaScript כמו בסגנון CSS, השתמש ב-' createElement() ' שיטה. הוא מנוצל כדי ליצור באופן דינמי אלמנט חדש. לסטיילינג צור ' סִגְנוֹן ' אלמנט באמצעות שיטה זו. ה ' createElement('סגנון') שיטה ב-JavaScript משמשת ליצירת אלמנט סגנון חדש באופן דינמי, שניתן להשתמש בו כדי להוסיף סגנונות CSS לדף אינטרנט.
תחביר
התחביר הנתון משמש עבור ' createElement() ' שיטה:
להוספת סגנון CSS ב-JavaScript, השתמש בתחביר הנתון:
const סִגְנוֹן = מסמך. createElement ( 'סִגְנוֹן' ) ;לאחר מכן הוסף את רכיב הסגנון בתג head באמצעות התחביר שלהלן:
מסמך. רֹאשׁ . appendChild ( סִגְנוֹן ) ;כאן, ' סִגְנוֹן ' הוא הפניה לאלמנט הסגנון החדש שנוצר, ו' document.head ” הוא אלמנט ה-head של מסמך ה-HTML.
דוגמא
ראשית, צור אלמנט סגנון באמצעות ' createElement() ' שיטה:
כעת, צור ' btn ' מחלקה להחלת עיצוב זהה על כל הכפתורים והמזהים ' btn1 ', ' btn2 ' ו' btn3 ' לעיצוב כפתורים בודדים:
סִגְנוֹן. innerHTML = `. btn {
גוֹפָן - גודל : 1.1 רמ ;
ריפוד : 3 פיקסלים ;
שולים : 2 פיקסלים ;
גוֹפָן - מִשׁפָּחָה : לְלֹא - תָג ;
גבול - רַדִיוּס : .5 רמ ;
}
#btn1 {
רקע כללי - צֶבַע : ירוק ;
צֶבַע : לבן ;
}
#btn2 {
רקע כללי - צֶבַע : אָדוֹם ;
צֶבַע : לבן ;
}
#btn3 {
רקע כללי - צֶבַע : צהוב ;
}
` ;
כעת, הוסף את אלמנט הסגנון לראש המסמך על ידי העברה כפרמטר ל' appendChild() ' שיטה:
מסמך. רֹאשׁ . appendChild ( סִגְנוֹן ) ; תְפוּקָה
זה הכל על הוספת CSS ב-JavaScript.
סיכום
להוספת CSS עם JavaScript, השתמש בעיצוב המוטבע כולל ' סִגְנוֹן 'נכס, ו' setAttribute() שיטת ', או הסטיילינג העולמי באמצעות ' createElement() ' שיטה. סטיילינג גלובלי יעיל יותר בעוד ששיטת אינליין אינה מומלצת מכיוון שהיא מקשה על שמירה על סגנונות היישום ועלולה להוביל לחזרת קוד. מאמר זה תיאר את השיטות להוספת CSS עם JavaScript.