Get Adobe Flash player
דף הבית אובייקטים שינוי CSS: אובייקט class

סגנונות CSS

חלק עיקרי מהשליטה על עיצוב האתר נעשה באמצעות הסגנונות (CSS).

רוב אתרי האינטרנט בנויים מדפי HTML הנסמכים על קובץ CSS הכולל בתוכו את כל הוראות עיצוב האתר (מקטעים, עיצוב טקסט, תמונות רקע וכו').

את הוראות ה CSS מכנסים לרוב בכללים (בוררים, Selectors) בעלי שם ייחודי.

החלת הסגנון (הכלל) הרצוי בדף HTML נעשית ע"י תכונת class (ולעיתים ע"י ה- id), המהווה חלק מהתג.

בדוגמא הבאה, ייכתב הטקסט "כותרת ראשית" על פי כללי התג H1 אבל בתוספת ההגדרות שנכתבו בסגנון המכונה "header".

<h1 class="header">כותרת ראשית</h1>

ישנה גם דרך אחרת לשינוי הוראות העיצוב. בדרך זו מוסיפים את הנחיות ה CSS ישירות אל תוך התג הרלוונטי. את זה עושים באמצעות המאפיין style.

בדוגמא הבאה הוספנו לתג H1 צבע אדום ומרכוז:

<h1 style="color:#ff0000; text-align:center;" >כותרת ראשית </h1>

ג'אווה סקריפט יודעת לשנות את הוראות ה CSS בשתי הדרכים, ובשיעור זה נציג את שתיהן.

דרך א': שינוי ה class

המאפיין className משמש לאיתור ערך ה class הנוכחי או לקביעתו מחדש.

איתור והצגת ה- class הקיים

בדוגמא שלפניכם, נעשה שימוש במאפיין לצורך הצגת הסגנונות הקיימים משלושת תגי div הראשונים שבדף.

בסקריפט שבדוגמא הבאה, נטען את המידע הטעון בתגי div שבדף ה HTML אל משתנה (באמצעות המתודה getElementsByTagName()), ואח"כ "נשלוף" את ערכי ה class השונים באמצעות המאפיין className ונדפיסם על המסך:

 <body dir="rtl">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
<script type="text/javascript">
  <!--
   x=document.getElementsByTagName("div");
   for (y=0;y<=2 ;y++)
   {
   z=y+1
   document.write("ה class בדיב מס'  " + z + " הוא "+ x[y].className+"<br>"); 
   }
  //-->
</script>

שינוי ה- class

בדוגמא הבאה, נעשה שימשו במאפיין className לצורך מתן ערך חדש ל class.

בחלק ה head הכנסנו שני סגנונות CSS: האחד נקרא "blue" והשני "red". מיד לאחד מכן נכתבה פונקציה שתפקידה להחליף את הסגנון התחילי (class="blue") ל- class="red".

בחלק ה- body, ישנו ה- div הכולל את ה class התחילי ופקודה להפעלת הפונקציה בעת מעבר העכבר מעל הטקסט:  

<head>
<style type="text/css">
 .blue {
  color: blue;
  font-size: 22px;
  }
 .red {
  color: red;
  font-size: 28px;
  cursor: wait;
  }
 </style>
 <script type="text/javascript">
 <!--
function change_cls()
{
document.getElementById("new_class").className="red";
}
 //-->
 </script>
 </head>
 <body dir="rtl">
 <div id="new_class" class="blue" onmouseover="change_cls()">עבור עלי להחלפת סגנון CSS</div>
 </body>

 

אל השיעור הקודם אל השיעור הבא