JavaScript/דוגמאות/הסתרה והצגה של אלמנט

כותרת HTML

החלק הראשון הוא כותרת דף ה-HTML שמצהירה על הדף כעל XHTML. כותרת זו חשובה על מנת להציג שפה וקידוד כיאות. אין לה כל קשר ל-JavaScript אך היא תופיע בכל הדוגמאות. מומלץ לקרוא פעם אחת את HTML/כותרת HTML ולאחר מכן לא לשים לב לחלק זה בדוגמאות הבאות.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he" dir="rtl">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

פונקציות Javascript

החלק השני הוא הסקריפט שלנו בו אנו מגדירים את הפונקציות הבאות:

hide_me שמקבלת כפרמטר את myid - מזהה של אלמנט HTML ומסתירה את האלמנט.
show_me שמקבלת כפרמטר את myid - מזהה של אלמנט HTML ומציגה את האלמנט.
toggle_me שמקבלת כפרמטר את myid - בודקת אם הוא מוסתר או מוצג והופכת את מצב ההצגה שלו.


    <script type="text/javascript">
    <!--hide
        function hide_me(myid)
        {
             document.getElementById(myid).style.display="none";
        }

        function show_me(myid)
        {
             document.getElementById(myid).style.display="block";
        }
        
        function toggle_me(myid)
        {
            if (document.getElementById(myid).style.display=="none") {  // if I'm hidden
                document.getElementById(myid).style.display="block";        // show me
            } else {                                                    // else 
                document.getElementById(myid).style.display="none";         // hide me
            }
        }

    //-->
    </script>
</head>

שימו לב למושגים הבאים:

document - אובייקט האב של מסמך ה-HTML שלנו.
getElementById - שיטה של אלמנט אב שמקבלת כפרמטר ID של אלמנט צאצא ומחזירה אובייקט אלמנט.
style - מאפיין הסגנון של אלמנט
display - מאפיין ההצגה של מאפיין הסגנון של אלמנט

     document.getElementById(myid).style.display

שורה זו היא המאפיין display של המאפיין style של האלמנט שה-ID שלו הוא myid שהוחזר על ידי getElementById מתוך אוסף האלמנטים שבאלמנט האב document.

כאשר אנחנו קובעים את המאפיין display ל- 'none' הוא אינו מוצג.
כאשר אנחנו קובעים את המאפיין display ל- 'block" הוא מוצג. תשומת לב: הרבה מאפיינים מלבד block גורמים להצגת האובייקט. בדקו בקריאה נוספת.

גוף HTML

בהתחלה שלושה קישורים שכל אחד מהם מפעיל פונקציה אחרת משלושת אלו שהגדרנו למעלה. הפרמטר שנשלח לכל הפונקציות הוא 'MyData'. בהמשך אנו רואים HTML פשוט שחלק ממנו תחום בתוך תג div. לתג הזה יש ID, מזהה ייחודי: 'MyData' ואותו אנו שולחים כפרמטר.

<body>
    <a href = "javascript:hide_me('MyData');">הסתר תוכן</a><br/>
    <a href = "javascript:show_me('MyData');">הצג תוכן</a><br/>
    <a href = "javascript:toggle_me('MyData');">החלף מצב הצגת תוכן</a><br/>

    כיתוב לפני <br/>
    כיתוב לפני <br/>
    <div id = "MyData">
        תוכן להסתרה <br/>
        תוכן להסתרה <br/>
        תוכן להסתרה <br/>
        תוכן להסתרה <br/>
    </div>
    כיתוב אחרי <br/>
    כיתוב אחרי <br/>
    כיתוב אחרי <br/>
    כיתוב אחרי <br/>
</body>
</html>

הדף השלם

העתק ונסה.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he" dir="rtl">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script type="text/javascript">
    <!--
        function hide_me(myid)
        {
             document.getElementById(myid).style.display="none";
        }

        function show_me(myid)
        {
             document.getElementById(myid).style.display="block";
        }
        
        function toggle_me(myid)
        {
            if (document.getElementById(myid).style.display=="none") {  // if I'm hidden
                document.getElementById(myid).style.display="block";        // show me
            } else {                                                    // else 
                document.getElementById(myid).style.display="none";         // hide me
            }
        }

    //-->
    </script>
</head>
<body>

    <a href = "javascript:hide_me('MyData');">הסתר תוכן</a><br/>
    <a href = "javascript:show_me('MyData');">הצג תוכן</a><br/>
    <a href = "javascript:toggle_me('MyData');">החלף מצב הצגת תוכן</a><br/>

    כיתוב לפני <br/>
    כיתוב לפני <br/>
    <div id = "MyData">
        תוכן להסתרה <br/>
        תוכן להסתרה <br/>
        תוכן להסתרה <br/>
        תוכן להסתרה <br/>
    </div>
    כיתוב אחרי <br/>
    כיתוב אחרי <br/>
    כיתוב אחרי <br/>
    כיתוב אחרי <br/>
</body>
</html>

לקריאה נוספת

http://www.w3schools.com/css/pr_class_display.asp - כל הערכים האפשריים של המאפיין display.