לפני שמתחילים שלב 1 - רקע שלב 2 - גופן שלב 3 - פסקה שלב 4 - תיבה שלב 5 - רשימות עיצוב קישורים שונות CSS ב-JS

JavaScript

נכון. עיצבתי את האתר, אך מה אעשה אם ברצוני להקנות לאתר תכונות דינאמיות (כגון הצגה והסתרה, הנפשה(אנימציה), החלפת תמונה במעבר עכבר וכו'). אני יודע JavaScript, אך איך משלבים בה את css?
התשובה היא ש-CSS הוא חלק מ-Dynamic HTML (DHTML) וניתן לנצל את DHTML עד הסוף...

חשוב: אל תתחיל לנסות את JavaScript ושכבות לפני שתלמד את כל CSS!

על מנת לשנות גליון סגנונות בסקריפט יש לדעת כמה כקוים מנחים:

כרגיל! נטסקייפ עושה צרות. Netscape Navigator תומך ב-DHTML אחרת מ-Internet Explorer.
ברוב המקרים צריך להשתמש בפונקציה
יש לא-מעט תכונות שנתמכות רק על ידי VBScript ו-Internet Explorer

נתחיל בכלל הראשון

כיצד לקרוא ל-CSS

ל-CSS קוראים וכותבים דרך משתנים שמתחילים ב:
1. Internet Explorer: document.all
2. Netscape Navigator: Document

כדי לקבוע כללים לכל מיקום של תגית מסוימת כותבים:

Internet Explorer:

document.styleSheets["stylename"].addRule("tag", "property");

כש-style name הוא id של תגית style כלשהיא בדף.

Netsvape Navigator:

document.tags.P.property = value;

כדי לכתוב לקוד מסוים (בעזרת ID) כותבים:

document.getElementById(id).style.property = value

שליטה בשכבות באמצעות JavaScript

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

שם	תיאור קצר
position	קובע את המיקום והוא מקבל: Static מגדיר פריטים רגילים של HTML שאינם נינים להזזה. ברירת המחדל. absolute - מגדיר שפריט ימוקם בהתאם לקורדינטת הנקבעות על ידך. realative - מגדיר פריט המוסט במידה נתונה ממיקום Static - המיקום הרגיל של הדף ב-HTML
height & width	דומות לתכונות הסטנדרטיות ב-HTML וקובעות את הרוחב הגובה.
overflow	מציין אם מלבן הגזירה חותך את הפריט, או שפסי גלילה מאפשרים לראות את שאר חלקיו.
z-index	מציין את מידת החפיפה בין פריטים. המספור מתחיל בדרך כלל מ-1 ועולה עם כל שכבה נוספת "על גבי" הדף.באמצעות שינוי הערך ניתן לקבוע איזה פריט הוא העליון.
visibility	קובע אם השכבה תוצג. מקבל Visible, hidden ו-inherit. הערך inherit משמעותו שהפריט מקבל את מידת החשיפה של הפריט שהוא נמצא בתוכו (לדוגמא, טבלה)
background-color	מגדיר את צבע הרקע של הטקסט בשכבה
layer-background-color	מגדיר את רקע השכבה בין אם יש בה טקסט או לא
background-image	מגדיר תמונת רקע של הטקסט בשכבה
layer-background-image	מגדיר את רקע השכבה (עם אם אין בה טקסט)

היות ומדובר ב-CSS, צריך למצוא תגית שמתאימה להכיל את המאפין Style ושאינה עושה כלום חוץ ממעבר שורה. אנו לוקחים כקרבן את <Div>

כעת ניצור דוגמה משולבת של שכבות ו-JavaScript. בשלב הראשון זה מה שיוצא:

<html><head><title>TestPage</title>
</head><body><h1>דוגמת שכבות</h1>
<p>זוהי פיסקה שלא נמצאת בתוך השכבות</p>
<div id=l1 style="position:static'background-color:lightgreen">פיסקה עם צבע שונה</div>
<div id=l2 style="position:absulute; left:4000;top:200;height:200;width:100;backgound-color:teal>זוהי שבה ראשונה</div>
<div id=l3 style="position:absulute; left:50;top:200;visibility:hidden>זוהי שכבה סודית ומוסתרת</div>
</body></html>

עכשיו, אנו מוכנים לביצוע של סקריפט.
שפת JavaScript (וגם vb) כוללת אוביקט בשם layer. ב-Netscape הוא תחת document. ב-Internet Explorer הוא תחת document.all והמאפינים הם תחת המאפיין Style של האוביקט Layer.

הערה: הסקריפטים נבדקו רק ב-Internet Explorer.

<html dir=rtl><head><title>TestPage</title>
<script language=JavaScript>
function ShowOrHide(value) {
    if (value == 0) {
        //בדיקה אם הדפדפן הוא Netscape Cummunicator
        if(document.layers){
            document.layers["l3"].visibility = 'hide';}
        else {document.all["l3"].style.visibility = 'hidden';};}
    else if (value == 1){
        //בדיקה אם הדפדפן הוא Internet Explorer
        if(document.layers){
            document.layers["l3"].visibility = 'show';}
        else {document.all["l3"].style.visibility = 'visible';}
     }
}
</script>
</head><body><h1>דוגמת שכבות</h1>
<p>זוהי פיסקה שלא נמצאת בתוך השכבות</p>

<input type=button name=show-layer Value="הצג שכבה"
id=show_layer onclick="ShowOrHide(1);">
<input type=button name=sho-layer Value="הסתר שכבה" id=sow_layer onclick="ShowOrHide(0);">
<hr>
<div id=l1 style="position:static; background-color:lightgreen">פיסקה עם צבע שונה</div>
<div id=l2 style="position:absolute; left:400; top:200;
height:200; width:100; background-color:teal">זוהי שכבה ראשונה</div>
<div id=l3 style="position:absolute; left:50; top:200;visibility:hidden">זוהי שכבה סודית ומוסתרת. הוצגה בעזרת JavaScript</div>
</body></html>