מדריך CSS להצגת והסתרת אלמנטים בדף

שימוש בתכונה visibility

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

תכונה ערכים הסבר
visibility collapse תקף רק לאלמנטים הקשורים לטבלה כגון שורה או עמודה. ערך זה יגרום לאלמנט לא להיות מוצג, אולם הדבר לא יגרום לשינוי המיתאר הכללי של הטבלה. אלמנטים אחרים יכולים לתפוס את מקומו של אלמנט שקיבל ערך זה.
hidden ערך זה יגרום לכך שהדפדפן יתעלם מהאלמנט שמקבל את הערך.
inherit
האלמנט יורש את ניראותו מהאלמנט שבתוכו הוא מקנן.
visible ערך ברירת המחדל של כל אלמנט. במקרה של קבלת ערך זה הדפדפן יציג את האלמנט שמקבל את הערך.

להלן דוגמת קוד להמחשת אופן השימוש בתכונה visibility:

img{visibility:hidden;}

שימוש בתכונה display לצורך שליטה בניראות אלמנטים

התכונה display יכולה לקבל ערכים רבים ששימושיהם שונים. אחד הערכים שתכונה זו יכולה לקבל הוא: none. כאשר אלמנט מקבל ערך זה הדבר יגרום לדפדפן להתעלם מהאלמנט לחלוטין ובכך לגרום לאלמנט להיות מוסתר כאילו מעולם לא היה חלק מהדף. יש לשים לב שבניגוד לתכונה visibility באמצעות התכונה display אנו גורמים לדפדפן להתעלם לחלוטין מהאלמנט המוסתר כך שהוא אפילו לא יתפוס מקום ואלמנט אחר יכול לתפוס את מקומו.

שילוב בין תכונה זו לבין קוד בצד השרת (למשל בשפת Javascript) יכול לאפשר פיתוח דף דינמי שאלמנטים בתוכו מוצגים או מוסתרים על פי חוקיות עסקית כלשהי.

להלן דוגמת קוד לשימוש בתכונה display לצורך הסתרת אלמנט:

img{display:none;}


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש