Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Как подгрузить CSS при помощи Prototype

August 17th, 2007 | Category: CSS, Javascript | Автор: Александр

Не часто это бывает нужно, но иногда приходится подгружать CSS джаваскриптом. Например нужно выдавать браузерам разные версии CSS. В этом туториале мы сделаем простую HTML страничку, где CSS стиль загрузится через 5 секунд после открытия страницы в браузере.

Для этого "чуда" мы используем JavaScript библиотеку Prototype, с которой особенно хорошо знакомы все Ruby On Rails программисты . Конечно можно сделать всё, что я собираюсь показать, и стандартным джаваскритом, без дополнительных библиотек, но Prototype я хотел использовать по двум причинам. Во первых с прототайпом программировать удобнее, во вторых я хотел попробовать новую версию прототайпа, с его новым DOM Builder-ом.

Итак приступим.

Вот наш HTML. Ничего особенного в нём нет. Обратите внимание, что нигде нету ссылки на CSS файл.

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  6.         <title>CSS стиль подгружается при помощи Javascript библиотеки - Prototype</title>
  7.         <!-- Для туториала нужен Prototype 1.6.0 -->
  8.         <script type="text/javascript" charset="utf-8" src="prototype.js"></script>
  9.     </head>
  10.     <body id="mybody">
  11.        
  12.         <h1>Привет, через 5 секунд мир станет ярче</h1>
  13.         <p>
  14.             CSS стиль подгружается при помощи Javascript библиотеки - Prototype.
  15.         </p>
  16.    
  17.     </body>
  18. </html>

А вот CSS который мы хотим загрузить через 5 секунд после открытия страницы. Этот стиль изменит цвет фона страницы на светло зелёный, или cucumber_shampoo.

PLAIN TEXT
CSS:
  1. #mybody {
  2.     background-color: #E1F5B0;
  3. }

Для этого напишем набольшой скрипт, который мы поместим в HEAD.

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" charset="utf-8">
  2.         // Следим за загрузкой страницы
  3.         Event.observe(window, 'load', function()
  4.         {
  5.             // Ставим таймер на 5 секунд
  6.             setTimeout(function()
  7.             {
  8.                 // Получаем элемент HEAD
  9.                 var head = $$('head')[0];
  10.                 // Создаём новый элемент LINK при помощи Prototype DOM-Builder
  11.                 var css = new Element('link', {type: 'text/css', rel: 'stylesheet', href: 'dynamic.css', media: 'screen'});
  12.                 // Добавим LINK в HEAD
  13.                 head.insert(css);
  14.             }, 5000);
  15.         });
  16.     </script>

Готовый результат можно посмотреть по этому адресу. Хочу ещё раз обратить ваше внимание на то, что версия прототайпа, использованная в туториале - 1.6.0 Release Candidate. С версией 1.5.1.1 скрипт скорее всего работать не будет.

Кто напишет в комментариях самый короткий JavaScript, который делает тоже самое, но без таймера - тот молодец :-)

del.icio.us Забобрить!

1 Comment so far

  1. Pilat March 3rd, 2008 00:54

    Что-то примерно так :

    $(document).ready(function(){
    $(’head’).append(’<link type=”text/css” rel=”stylesheet” href=”dynamic.css” media=”screen”);
    });

    Конечно, без прототипа, а с jQuery :)

Leave a reply