היכולת להסתיר
ולהציג אובייקטים בדפדפנים השתנתה
משמעותית בעקבות כניסת השימוש ב W3C
DOM ב 2 הדפדפנים הראשיים. על מנת
להסתיר ולהציג אובייקטים בדפדפנים
מגירסאות 4.x היית
צריך להסתובב סביב בעיות אי-תאימות ובסופו
של דבר היית נאלץ להציג ולהסתיר רק DIV's
ו LAYERs וכמו כן
היית נאלץ להשתמש בתכונת ה visibility.
ימים אפלים אלו
הסתיימו - כעת ביכולתך לשנות את התצוגה של
כל אלמנט בעזרת הגישה דרך ה DOM .
Click Me.
ראית זאת? שינינו הרגע את התצוגה
של הכותרת העליונה ל "none".
הקוד אשר השתמשנו בו על מנת ליצור את הכותרת
הינו:
| <img
border="0" src="images/w3c_blue.gif"
width="72" height="48"> |
שים לב כי זה כלל לא מכיל ID ,
הכיצד? לתת ID זה אינו דבר הכרחי ,
מכיוון שניתן לגשת לכל אלמנט דרך עץ המסמך (
זכור את שיטת האבות והבנים מהשעור הקודם). על
מנת להסתיר זאת, תחילה עלינו לאתר זאת. ניתן
לעשות כן ע"י שיטת ה ID או ע"י
שיטת עץ המסמך- בשתיהן נקבל את אותן תוצאות.
לאחר שאיתרנו את האובייקט אשר אנו מעוניינים
לבצע מניפולציות על התצוגה שלו – עלינו לשנות
את תכונת התצוגה שלו (display property).
ניתן לגשת לתכונה זו בעזרת object.style.display
, כפי שבוצע בדוגמא הנ"ל:
|
document.childNodes[1].childNodes[1].childNodes[1].style.display = "none";
|
בדוגמא זו , השתמשנו בעץ
המסמך על מנת לאתר את האובייקט שאותו רצינו
לשנות ואז שינינו את ערך תכונת התצוגה שלו
ל "none". בד"כ נשתמש ב
"none" על מנת להסתיר
אובייקט וב-"" על מנת להציג אובייקט.
לאלו מכם המכירים היטב את Internet
Explorer זה יראה טבעי השימוש בDOM כי
הינו דומה מאוד לתחביר של IE ,
מלבד נושא איתור האובייקטים בדף.
בכדי להקל את נושא
התחלפות הראות(visibility) של
אלמנט , אני בד"כ משתמש בפונקציה הבאה:
function HideShow(obj)
{
if (parseInt(navigator.appVersion) >= 5 || navigator.appVersion.indexOf["MSIE 5"] != -1)
{
if (obj.style.display=="none")
obj.style.display="";
else
obj.style.display="none";
}
}
|
אתה יכול לקרוא לפונקציה זו עם כל
אובייקט אשר ניתן להיראות [visible].
לראש
הדף
