ראשי > מבוא > עיצובים בתוך שורה

עיצובים בתוך שורה

נוכל לומר ש"עיצוב בתוך שורה" הוא עיצוב שמתייחס לאלמנט בודד ולא לכל האלמנטים מסוג או מחלקה מסוימים. בצורה אופיינית, עיצוב בתוך שורה מוגדר תוך שימוש בתכונות style עבור התגים של האלמנט. למשל: <H4 STYLE="color:blue;">.

ב-MSIE, תוכל להשתמש ב-JavaScript כדי לשנות עיצוב בתוך שורה בכל זמן שהוא. השינוי יופיע מיד על המסך. תעשה זאת תוך שימוש בעצם Style, שעליו הסתכלנו מוקדם יותר בפרק "מיקום דינמי". עצם ה-Style ב-DOM של MSIE תומך בכל תכונות העיצוב של גיליונות הסגנון. למרות זאת, יש מעט שינויים בשמות התכונות בין תחביר ה-CSS לתחביר ה-DOM. למרבה המזל, השינויים עוקבים אחרי כלל מסוים. נסתכל על התכונה   font-weight של CSS. התכונה המקבילה בתחביר ה-DOM נקראת fontWeight. בצורה דומה, תכונת ה-CSS text-align נקראת ב-DOM בשם textAlign. שמות התכונות ב-CSS פשוט מבטלים את המקף והופכים את האות הראשונה במילה השניה לאות גדולה.

ככל שזה נשמע מבלבל, הבה ונביט בדוגמה שממחישה כמה קל לעשות שינויים בעיצוב. דמיין שיש לך את אלמנט ה-HTML הבא:

<P ID="selectrule" ALIGN="left" STYLE="color:blue; font-weight:normal;">
Please select one item below.
</P>

כעת, מספר אירועים מתרחשים והמשתמש לא עוקב אחר ההוראות. תרצה, אם כן, להדגיש את הוראות הביצוע:  

document.all.selectrule.style.color="red";
document.all.selectrule.style.fontWeight="bold";

כאשר הקוד העליון מתבצע, הטקסט שמזוהה עם האלמנט שנקרא selecture יהפוך אדום ובולט. כמובן, תוכל להחזיר את האלמנט למצבו המקורי ע"י שינוי תכונת color בחזרה ל-    “blue” ושינוי fontWeight בחזרה ל-"normal".  

שים לב שהצהרות  JavaScript שמשנות את העיצוב מקושרות ישירות עם האלמנט המסוים. תוכל תמיד לעשות זאת, אפילו אם עיצוב האלמנט לא מוגדר בתוך השורה, אלא מגיע בירושה ממחלקה או מגיליון סגנון גלובלי. לא משנה כיצד קיבל האלמנט את עיצובו המקורי, אם מעיצוב inline או מגיליון סגנון, בכל מקרה שינוי עיצוב ישיר ייושם רק עבור אלמנט בודד. לכן, צורה זו של עיצוב דינמי ב-JavaScript תהיה תמיד inline.

לעמוד הקודם      לעמוד הראשי        לעמוד הבא