Как подключить CSS-файл при помощи jQuery

Home » CSS+HTML » JavaScript » Как подключить CSS-файл при помощи jQuery

Иногда нам может потребоваться возможность динамически подключить CSS файл после того как HTML страница сформирована и загружен новый блок. Нам поможет библиотека jQuery и пару строк.

Итак нам потребуется для примера:
HTML-файл

<html>
   <head>
      <title>Подключение CSS файла при помощи jQuery</title>
   </head>
<body>
   <div id='container' class='e-container'>
      <!-- BLOCK LOADED WITH AJAX -->
      <div id='message' class='b-message'>

         <p class='b-message-head'>Заголовок сообщения</p>
         <p class='b-message-text'>Текстовое сообщние</p>
      </div>
      <!-- END OF BLOCK LOADED WITH AJAX -->
   </div>
</body>
</html>

CSS-файл подгружаемый с помощью jQuery

.e-container {border: 1px solid #000;background-color:#EEE;padding:8px;margin:8px;width:400px;}
.b-message{margin: 0 auto; width:200px;border: 1px solid #333333;background-color: #ffffff; }
.b-message-head{background-color: #333333; color: #ffffff;}
.b-message-text{color: #333333;}

jQuery-файл
Зарание скачиваем библиотеку с официального сайта.

Реализеум динамическую загрузку CSS с помощью jQuery:
1. Подключаем файл с библиотекой jQuery

<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>

2. Добавляем следующий код

<script type="text/javascript">
    $(document).ready(function(){
    var box = $("#container");
    if(box.size()>0){
            if (document.createStyleSheet){
                document.createStyleSheet(box.childen().attr('id')+'-style.css');
            }
            else {
                $("head").append($("<link rel='stylesheet' href='"+box.childen().attr('id')+"-style.css' type='text/css' media='screen' />"));
            }
        }
    });
</script>

вместо box.childen().attr('id')+'-style.css' можно просто укаать название файла CSS. В нашем примре подгружали CSS файл описываюший блок message.

Ну вот и вся реализация. пробуйте.. если что-то не получается готов помочь разобраться.

Как подключить CSS-файл при помощи jQuery

Похожие сообщения

Комментарии