וובמאסטר - תיכנות ובניית אתרים

מדריך DHTML - שינוי עיצוב ו-CSS

RiU/‏ 18 יולי, 2003
F+
F-

שינוי עיצוב בעזרת DHTML (שימוש באלמנטים)

אז איך אנחנו גורמים לתגית ב-HTML לשנות את הערכים של העיצוב (CSS) שלה?
אפשר פשוט לפנות אליה בשם שלה ולהגיד לה בקשר לעיצוב שלה, אז נאמר שבא לנו להחליף לה צבע (סתם ככה) אז שתחליף את הצבע שלה לאיזה צבע שבא לנו, למשל: אדום. אגב, לא צחקתי בקשר של לפנות אליה.. פשוט צריך לדעת איך. קודם צריך לתת לה שם:

<h1 id="myTag">Hello!</h1> 
בעצם רובנו לא יודעים מה הדפדפן עושה ברגע שהוא רואה תגית. אנחנו אולי יודעים מה הוא יראה על המסך, אבל איך הוא עושה את זה לא יודעים ולא נצטרך לדעת, אלא אם כן נצטרך לפתח את דור העתיד של אקספלורר או נטסקייפ. ובכל זאת, איך אנחנו גורמים לדפדפן להראות משהו אחר על המסך? בשביל זה יש לנו את המתורגמן שנקרא JavaScript ובעזרת אובייקטים מסויימים נסביר לדפדפן שאנחנו רוצים את המילים בין התגית <h1> שקוראים לה "myTag" לבין </h1> שתראה על המסך בנוסף להגדרות הסטנדרטיות גם שהמילים יהיו בצבע אדום, עושים את זה ככה:

<script type="text/javascript">
	myTag.style.color="red"
</script> 
ונאמר נרצה לשנות את הרקע:

myTag.style.backgroundColor="yellow" 
זה כל הרעיון מאחורי שינוי העיצוב, בוחרים את שם התגית פונים לאלמנט style ומשם זה CSS רק שבמקום ":" יש "=" וכל הערכים נכנסים לסוגריים.
תגיות: JS‏  /  Javascript‏  /  DHTML‏  /  DOM‏  /  Dynamic‏  /  דינמי‏  /  CSS‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות