ראשי > מבוא > שינוי החוקים

  שינוי החוקים

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

מתחת ישנה הגדרת גיליון סגנון שקובעת 2 עיצובים: עיצוב גלובלי שמיושם לכל האלמנטים מסוג <H3> (אלמנטים בעלי פונט Arial, בצבע כחול, בגודל large), ומחלקת עיצוב כללית בשם warning (אדום, בולט, סגנון נוטה לצד), שתיושם בכל אלמנט שישתמש במחלקה.

<STYLE ID="sheet1">
H3 { color:blue; font-family:"Arial"; font-size:large; }
.warning { color:red; font-weight:bold; font-style:italic; }
</STYLE>

המטרה שלך, לאחר שהמסמך הופיע על המסך לפי הגדרות גיליון הסגנון למעלה, היא לשנות את העיצוב דרך JavaScript כך שכל השינויים ייראו דינמית על המסך. כדי לעשות זאת, תצטרך ללמוד מינוח חדש. כל "הגדרת עיצוב" בגיליון הסגנון ידועה בשם "חוק" (rule). כך, השורה שמגדירה עיצוב עבור H3 היא חוק אחד, בעוד השורה שמגדירה את המחלקה warning היא חוק שני.  

ב-DOM של מיקרוסופט, תוכל לגשת לגיליון סגנון דרך המערך styleSheets[]. גיליון סגנון בודד מוגדר ככל דבר בין התגים </style>…<style>. הדוגמה למעלה, אם כן, מהווה גיליון סגנון אחד. אם זה המופע הראשון של תגים כאלה בקוד המקור שלך, אזי זה יהיה גיליון הסגנון הראשון. הגישה אל הגיליון הראשון תהיה בעזרת JavaScript

document.styleSheets[0]

בתוך כל עצם styleSheet במערך יש אוסף של חוקים. לכן, תיגש אל החוק הראשון- החוק עבור H3- בגיליון הסגנון בצורה הבאה:

document.styleSheets[0].rules[0] 

ואל החוק השני- מחלקת ה-warning- תיגש כך:  

document.styleSheets[0].rules[1]

כעת, לפני שזה נעשה מבלבל יותר, נאמר שלכל עצם מסוג חוק יש עצם עיצוב. דרך עצם העיצוב הזה תוכל לשנות את החוק. מה?? דוגמה: אתה רוצה לשנות את חוק H3 בדוגמה כך שצבעו יהפוך לצהוב:  

document.styleSheets[0].rules[0].style.color="yellow";

כעת תרצה לשנות את משפחת הפונטים של החוק הזה ל-courier:

document.styleSheets[0].rules[0].style.fontFamily="courier";

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

document.styleSheets[0].rules[0].style.fontStyle="italic";

כל אחת מהצהרות JavaScript שלמעלה תבצע שינוי עבור כל האלמנטים מסוג <H3> בעמוד. בצורה דומה, כל שינוי עיצוב בחוק של המחלקה warning  (document.styleSheets[0].rules[1].style.property))) יתבצע עבור כל התגים ששייכים למחלקה (P CLASS="warning").  

ברור ששינוי עיצוב דינמי הוא בעל עוצמה רבה, ומאפשר לך לשנות את מראה העמוד בשניות. תכונת עיצוב מעניינת במיוחד שכדאי לחקור היא התכונה display. תכונה זו מאפשרת לך לקבוע האם עיצוב יופיע או לא. עיצוב שלא ייעשה בו שימוש לא יתפוס שום מקום על המסך, אולם אם תשנה אחר כך את תכונת display מ"none" ל"block", כל אלמנט עם עיצוב זה יופיע פתאום. שאר העמוד יופיע מחדש בצורה אוטומטית כדי להתאים לתוכן החדש. זה שונה מבלוק בלתי נראה בכך שהעמוד כולו מתרחב ומתכווץ כדי להתאים עצמו לנוכחות או להעדר התוכן שנמצא בעיצוב.  

ניתן ללחוץ כאן ע"מ לראות את הקוד בפעולה

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