טקסט הוא הנכס הכי חשוב והכי גלוי לכל אפליקציה או דף אינטרנט, ללא שימוש בטקסט היוצר לא יכול להעביר במלואו את מחשבותיו או לספק מידע כראוי. בשל הצורך והחשיבות שלו, גם הסגנון שלו הופך לסיוט עבור רוב המפתחים. לטקסט סטטי, מאפייני ה-CSS והמסגרת שלו עוזרים מאוד אבל עדיין, יש צורך במאפיין שניתן להחיל על סגנון בצורה דינמית. למרבה המזל, נכס זה מסופק על ידי JavaScript בעל השם ' טקסט קישוט '.
בלוג זה יספק את ההליך להחלת סגנונות על אלמנט ה-HTML באמצעות המאפיין textDecoration.
כיצד להחיל סגנונות באמצעות תכונת ה-HTML Style textDecoration?
סגנון ה-DOM ' טקסט קישוט 'נכס בעצם מבצע סטיילינג כמו הוספת ' קו תחתון', 'קו מעל', 'קו דרך' ו'מצמוץ ' על אלמנט נבחר. מאפיין זה כשהוא מוגדר ל' אף אחד ' מסיר את סגנון ברירת המחדל המוחל על אלמנט זה כמו תג עוגן.
תחביר
התחביר עבור מאפיין textDecoration בסגנון DOM הוא:
eleObj. סִגְנוֹן . טקסט קישוט = 'ללא|קו-על|מצמוץ|קו תחתון|ראשוני|קו-דרך|ירושה'
בקר בטבלה למטה כדי לקבל מושג מהיר לגבי הערכים שניתן להקצות ל' טקסט קישוט ' תכונה:
| ערך | הֶסבֵּר |
|---|---|
| אף אחד | המר טקסט לפורמט רגיל תוך הסרת כל הסגנון המוגדר מראש; זוהי ברירת המחדל. |
| קו-על | הוספת שורה מעל או מעל הטקסט שנבחר. |
| לְמַצְמֵץ | גורם לטקסט להבהב אבל זה לא נתמך על ידי כל דפדפני האינטרנט. |
| לָשִׂים דָגֵשׁ | הוא מציב את השורה מתחת או בתחתית הטקסט שנבחר. |
| התחלתי | הגדר את המאפיין המוחל לערך ברירת המחדל שלו, שאינו כזה במקרה שלנו. |
| קו דרך | מקם את הקו במרכז הטקסט כלומר בין הטקסט. |
| אתה יורש | יורש את המאפיין שהוחל על רכיב השורש או האב. |
כעת, בואו נסתכל על תהליך היישום והשפעתו על הטקסט עבור כל ערך של ' טקסט קישוט ' תכונה.
דוגמה 1: מאפיין 'textDecoration = none'.
היישום המעשי של ' טקסט קישוט 'נכס בעל ערך של ' אף אחד ' יתואר בקוד הבא:
< גוּף >
< מֶרְכָּז >
< h1 סִגְנוֹן = 'צבע: כחול צוער;' > לינוקס < / h1 >
< לַחְצָן בלחיצה = 'Applier()' > אפלייר < / לַחְצָן >
< ע > כאשר הערך של המאפיין textDecoration מוגדר ל-None: < / ע >
< h3 תְעוּדַת זֶהוּת = 'useCase' סִגְנוֹן = 'text-decoration: overline;' > אלמנט ממוקד < / h3 >
< / מֶרְכָּז >
< תַסרִיט >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'ללא';
}
< / תַסרִיט >
< / גוּף >
הסבר לקוד האמור לעיל:
- ראשית, השתמש ב-'< לַחְצָן >' תג כדי ליצור כפתור ולהקצות לו מאזין אירועים של ' בלחיצה '. מאזין אירועים זה מפעיל פונקציית JavaScript בשם ' אפלייר '.
- לאחר מכן, צור אלמנט ממוקד ' h3 ' והקצה לו מזהה ייחודי של ' useCase '. כמו כן, החל את ה-CSS ' טקסט-קישוט 'נכס אליו בעל ערך של ' קו-על 'בעזרת ה' סִגְנוֹן ' תכונה.
- כעת, הזן את ' אפלייר ()' גוף הפונקציה ובחר את הרכיב הממוקד באמצעות המזהה שלו ' useCase ' וצרף את הסגנון ' טקסט קישוט ' תכונה.
- לאחר מכן, הקצה למאפיין ערך של ' אף אחד ' כדי להסיר כל סגנון קישוט טקסט שהוחל מראש על האלמנט.
התצוגה של דף האינטרנט לאחר ביצוע הקוד לעיל:
הפלט מראה שהסגנון המוחל על האלמנט הממוקד מוסר על ידי הקצאת הערך של ' אף אחד '.
דוגמה 2: מאפיין 'textDecoration = initial'.
קטע הקוד שלהלן ממחיש את היישום של ' טקסט קישוט ' מאפיין כאשר הערך של ' התחלתי ' מוקצה לו:
< תַסרִיט >פוּנקצִיָה אפלייר ( ) {
מסמך. getElementById ( 'useCase' ) . סִגְנוֹן . טקסט קישוט = 'התחלתי' ;
}
תַסרִיט >
הפלט שנוצר לאחר הידור של הקוד לעיל מוצג להלן:
הפלט לעיל מראה שהערך של עיטור הטקסט מוגדר לערך ברירת המחדל שלו שהוא ' אף אחד ” ומכאן שכל הפרה-סטיילינג הוחזר.
דוגמה 3: מאפיין 'textDecoration = overline'.
הקוד שלהלן מציג את היישום המעשי של ' טקסט קישוט ' מאפיין כאשר הערך של ' קו-על ' מסופק לו:
< גוּף >< מֶרְכָּז >
< h1 סִגְנוֹן = 'צבע: כחול צוער;' > לינוקס < / h1 >
< לַחְצָן בלחיצה = 'Applier()' > אפלייר < / לַחְצָן >
< ע > כאשר הערך של מאפיין textDecoration מוגדר לקו-על: < / ע >
< h3 תְעוּדַת זֶהוּת = 'useCase' > אלמנט ממוקד < / h3 >
< / מֶרְכָּז >
< תַסרִיט >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'קו על';
}
< / תַסרִיט >
< / גוּף >
ההסבר של הקוד לעיל מובא להלן:
- קודם ה ' כפתור' ו-'h3 אלמנט נוצר באותו אופן ומאפיין ה-CSS אשר מוחל על 'h3' הרכיב הוסר כעת.
- לאחר מכן, בתוך ' אפלייר פונקציית ' הרכיב הממוקד נבחר וה' טקסט קישוט 'נכס בעל ערך של ' קו-על ” מוקצה לאלמנט.
הפלט לאחר ביצוע הקוד לעיל מוצג להלן:
הפלט מראה את ההשפעה של ' textDecoration = קו-על ' מאפיין מעל הטקסט.
דוגמה 4: מאפיין 'textDecoration = קו תחתון'.
היישום המעשי של הטקסט כאשר הערך של ' לָשִׂים דָגֵשׁ ' מוקצה ל' טקסט קישוט ' הנכס מצוין להלן:
< תַסרִיט >פוּנקצִיָה אפלייר ( ) {
מסמך. getElementById ( 'useCase' ) . סִגְנוֹן . טקסט קישוט = 'לָשִׂים דָגֵשׁ' ;
}
תַסרִיט >
לאחר ההידור, הפלט נראה כך:
הפלט מראה שהשורה מתווספת בתחתית הטקסט.
דוגמה 5: מאפיין 'textDecoration = line-through'.
יישום ויזואלי של ' טקסט קישוט 'נכס בעל הערך של ' קו דרך ' מוצג להלן:
< תַסרִיט >פוּנקצִיָה אפלייר ( ) {
מסמך. getElementById ( 'useCase' ) . סִגְנוֹן . טקסט קישוט = 'קו דרך' ;
}
תַסרִיט >
הפלט שנוצר עבור הקוד לעיל מוצג להלן:
הפלט מראה את האפקט שנעשה על ידי ' קו דרך ' מעל טקסט האלמנט הממוקד.
סיכום
סגנון HTML DOM ' טקסט קישוט ' מאפיין עוסק ספציפית בעיצוב של רכיבי HTML באמצעות JavaScript כדי לבצע סגנון דינמי על רכיבי טקסט. ניתן להקצות ערכים מרובים ל' טקסט קישוט כדי לבצע וריאציות שונות של סטיילינג. ערכים אלו הם ' אין', 'קו-על', 'קו תחתון', 'קו דרך', 'ראשוני', 'מצמץ' ו'תורשה '. בלוג זה הסביר בהצלחה את התהליך שבאמצעותו המפתח יכול להחיל סגנונות באמצעות המאפיין textDecoration.