מדריך זה מרחיב את המטרה והפעולה של מאפיין 'סגנון' רכיב HTML DOM ב-JavaScript.
כיצד פועל הנכס 'סגנון' של רכיב HTML DOM ב-JavaScript?
ה-HTML DOM ' סִגְנוֹן ” הוא מאפיין לקריאה בלבד שעובד על סמך מאפייני הסטיילינג שהוקצו בהתאם. כמו כן, הוא מחזיר את ' CSSStyleDeclaration ' אובייקט המכיל את כל תכונות הסגנון המוטבע של רכיב ה-HTML המסוים.
הערה: האובייקט 'CSSStyleDeclaration' מכיל את תכונות הסגנון של CSS המוגדרות בסעיף head.
תחביר (הגדר מאפיין סגנון)
אֵלֵמֶנט. סִגְנוֹן . תכונה = ערךעל פי התחביר לעיל, ה' סִגְנוֹן ' המאפיין תומך רק בפרמטר אחד ' ערך ' המייצג את הערך של מאפיין הסגנון שצוין.
תחביר (החזרת מאפיין בסגנון)
אֵלֵמֶנט. סִגְנוֹן . תכונהבואו ליישם את התחבירים הנידונים לעיל של תכונת 'סגנון' באופן מעשי.
דוגמה 1: השתמש במאפיין 'סגנון' כדי להגדיר את הצבע של רכיב HTML מסוים
דוגמה זו מיישמת את התחביר הבסיסי של ' סִגְנוֹן ' מאפיין כדי להגדיר את הערך של המאפיין 'סגנון' כך שהצבע של רכיב ה-HTML המסוים ישתנה.
קוד HTML
ראשית, עבור על קוד ה-HTML הנתון:
< h2 > השתמש בסגנון Property ב-JavaScript h2 >
< h3 מזהה = 'H3' > כותרת משנה שנייה. h3 >
בשורות הקוד לעיל:
- ה ' ' תג HTML מציין את כותרת המשנה הראשונה.
- ה ' 'תג יוצר את כותרת המשנה השנייה של רמה 3 עם מזהה שהוקצה 'H3'.
קוד JavaScript
לאחר מכן, עקוב אחר קוד ה-JavaScript המוצהר:
< תַסרִיט >מסמך. getElementById ( 'H3' ) . סִגְנוֹן . צֶבַע = 'ירוק' ;
תַסרִיט >
בקטע הקוד שלמעלה, ' document.getElementById() שיטת ' ניגשת ל' הכלולה ' ' אלמנט באמצעות המזהה שלו ' H3 ' כדי להגדיר את ' צֶבַע ' ערך התכונה של האלמנט באמצעות ' סגנון.צבע ' תכונה.
תְפוּקָה
הפלט מראה שהייצוג החזותי של רכיב HTML הממוקד מוגדר בהתאם באמצעות המאפיין 'סגנון'.
דוגמה 2: השתמש במאפיין 'סגנון' כדי לקבל את הערך של תכונת 'סגנון' המיושם
בדוגמה זו, המאפיין 'סגנון' עוזר לגלות את תכונת ה'סגנון' שהוקצתה לרכיב ה-HTML באמצעות התחביר הכללי שלו (החזר מאפיין בסגנון).
קוד HTML
קוד ה-HTML מצוין כאן:
< h2 > השתמש בסגנון Property ב-JavaScript h2 >< h3 מזהה = 'H3' סִגְנוֹן = 'רקע-צבע:כתום;' > הערך של צבע הרקע של כותרת המשנה השנייה הוא : h3 >
< h4 מזהה = 'הַדגָמָה' > h4 >
בקוד הזה:
- ה ' ' תג HTML משתמש בתכונה 'סגנון' הקובעת את צבע הרקע של רכיב ה-HTML '
'.
- ה ' 'תג יוצר כותרת משנה ריקה של רמה 4 עם מזהה ' הַדגָמָה '.
קוד JavaScript
כעת, תסתכל על קוד ה-JavaScript הנתון:
< תַסרִיט >const ערך = מסמך. getElementById ( 'H3' ) . סִגְנוֹן . צבע רקע ;
מסמך. getElementById ( 'הַדגָמָה' ) . innerHTML = ערך ;
תַסרִיט >
בקוד הכתוב לעיל:
- המשתנה ' ערך 'מוכרז עם ' const ' מילת מפתח שמחילה את ' document.getElementById() ' שיטה לאחזר את האלמנט '
' באמצעות המזהה שלו לקבלת הערך של תכונת 'סגנון' שהוחלה והחלתה על האלמנט, כלומר, '
' באמצעות המאפיין 'סגנון'.
- השיטה 'document.getElementById()' משמשת שוב כדי לגשת לרכיב הריק שנוסף '
' ולהציג את הערך של תכונת 'סגנון' שהוקצתה כנגד רכיב ה-HTML שאוחזר ולצרף אותו ככותרת משנה באמצעות ' innerHTML ' תכונה.
תְפוּקָה
הפלט מחיל את צבע הרקע על האלמנט והערך של תכונת 'סגנון' שנקבע מוחזר גם הוא בהתאם.
סיכום
JavaScript משתמש ב-' סִגְנוֹן ' מאפיין כדי להקצות ולהחזיר את מאפייני ה'סגנון' המוטבעים של רכיב HTML DOM. זה דורש 'ערך' נוסף כדי ליישם את הפונקציונליות הרצויה בהתאם. מלבד הגדרה ואחזור, מועיל גם לשנות את תכונת ה'סגנון' הקיימת. מדריך זה הדגים את המטרה העיקרית, העבודה והיישום המעשי של ה-HTML DOM Element Style Property.