visibility

מגדיר אם אלמנט נראה או מוסתר, אך שומר על המקום בדף.

מה זה visibility?

המאפיין visibility ב-CSS מגדיר אם האלמנט נראה בדף או מוסתר, אך שומר על המקום שהוא תופס בדף. הערכים האפשריים כוללים:

visible - ברירת המחדל, האלמנט נראה בדף.
hidden - האלמנט מוסתר אך שומר על המקום שהוא תופס בדף, כלומר לא משפיע על זרימת הדף.

שימוש במאפיין visibility

באמצעות visibility ניתן לשלוט אם האלמנט נראה או מוסתר, מבלי לשנות את השפעתו על זרימת הדף.

דוגמה לשימוש ב-visibility

להלן דוגמה לשימוש במאפיין visibility:

אלמנט עם visibility:visible

אלמנט עם visibility:hidden

שימושים מתקדמים

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

אפשר להגדיר את זה לדוגמה כך

    
          <div style="width: 100px; height: 50px; background-color: lightblue;">
            <div style="visibility: visible; width: 100px; height: 50px; background-color: lightcoral;">
              אלמנט עם visibility:visible
            </div>
            <div style="visibility: hidden; width: 100px; height: 50px; background-color: lightgreen;">
              אלמנט עם visibility:hidden
            </div>
          </div>