"/>

החלפת קובץ CSS חיצוני בזמן ריצה

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

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

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

דוגמה להחלפת קובץ CSS חיצוני בזמן ריצה

בדוגמה הבאה ניצור שני גליונות CSS חיצוניים: לאחד נקרא blue.css ולשני נקרא red.css. כמו כן ניצור דף HTML המכיל פסקה אחת של טקסט ושני כפתורים. לחיצה על כל אחד מהכפתורים תגרום לשינוי גיליון ה - CSS המשויך לדף ה - HTML באמצעות התג <link>.

גליונות ה - CSS

זהו הקוד לגיליון ששמו blue.css. בגיליון זה נגדיר שהטקסט בתוך הדף יוצג בצבע כחול:

body { color: blue; }

זהו הקוד לגיליון ששמו red.css. בגיליון זה נגדיר שהטקסט בתוך הדף יוצג בצבע אדום:

body { color: red; }

פונקצית ה - Javascript שתחליף את גליונות ה - CSS

<script type="text/javascript">
  function newCSS(cssFile, cssLinkIndex) {

  var currentlink = document.getElementsByTagName("link").item(cssLinkIndex);
  var newlink = document.createElement("link")
  newlink.setAttribute("rel", "stylesheet");
  newlink.setAttribute("type", "text/css");
  newlink.setAttribute("href", cssFile);
  document.getElementsByTagName("head").item(0).replaceChild(newlink,     currentlink);
}
</script>

פונקציה זו נמקם בתוך התג <head>. הפונקציה מקבלת שני ערכים: את כתובת ושם קובץ ה - CSS שאנחנו רוצים שיחליף את הקיים וכן את האינדקס של התג <link> שאת הקובץ שעליו הוא מצביע עלינו להחליף. אינדקס זה דרוש לנו משום שלכל דף HTML ניתן לקשר באמצעות תגי <link> יותר מגיליון CSS אחד.

דוגמת קוד לדף ה - HTML שלנו (כולל הפונקציה להחלפת גליונות ה - CSS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Devschool - How to Change CSS files using JavaScript</title>
   <link rel="stylesheet" type="text/css" href="blue.css"/>
   <script type="text/javascript">
   function newCSS(cssFile, cssLinkIndex) {
   var currentlink = document.getElementsByTagName("link").item(cssLinkIndex);
   var newlink = document.createElement("link")
   newlink.setAttribute("rel", "stylesheet");
   newlink.setAttribute("type", "text/css");
   newlink.setAttribute("href", cssFile);
   document.getElementsByTagName("head").item(0).replaceChild(newlink, currentlink);
 }
  </script>
 </head>
 <body>
  <input type="button" onclick="newCSS('red.css', 0);" value="Red Text" />
  <input type="button" onclick="newCSS('blue.css', 0);" value="Blue Text" />

  <p>“If everybody minded their own business, the world would go around a   great deal
faster than it does.” ”
Lewis Carroll, Alice in Wonderland</p>
</body>
</html>

נסו בעצמכם   

אם תלחצו על הכפתור "נסו בעצמכם" שלמעלה תוכלו לצפות בדוגמה חיה של הקוד שלעיל. נסו ללחוץ על הכפתורים שבדוגמה ולראות כיצד משתנה גיליון ה - CSS המקושר לדף וכתוצאה מכך משתנה צבע הטקסט שבדף.

חשוב לשים לב לאופן שבו מימשנו (באדום בדוגמה למעלה) את הקריאה לפונקציה newCSS המחליפה את גיליון ה - CSS. כמובן שיכולנו לממש את הקריאה באמצעות התג <a> למשל או ישירות באמצעות קוד הבודק את קיומו של תנאי כגון סוג הדפדפן.

כלים ומאמרים בנושא

איך נוסיף קוד CSS לדף HTML

התג link ב - HTML

קישורים ב - HTML

התג header ב - HTML

מדריך להבנת פונקציות ב - Javascript

המדריך השלם לשפת Javascript

 


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש