Файл CSS використовується для опису стилів HTML елементів.
Підключити файл CSS до веб-сторінки можна за допомогою елемента link:
<html>
<head>
<link href="/dani/test.css" rel="stylesheet" type='text/css'>
</head>
<body>
<p>JavaScript</p>
</body>
</html>
Javascript також можна використовувати для завантаження файлу CSS. Завантаження CSS за допомогою JavaScript може бути корисним коли необхідно завантажити в залежності від пристрою, браузера або за темою веб-сторінки.
Додати новий елемент link
Додати новий елемент link до веб-сторінки дозволить завантажити новий файл CSS, так і завантажити декілька файлів стилів.
Створюємо елемент за допомогою метода document.createElement() і додаємо до HEAD через Element.appendChild().
function addStyle(href){
var link=document.createElement('link');
link.setAttribute('type','text/css');
link.setAttribute('rel','stylesheet');
link.href=href;
document.getElementsByTagName('head')[0].appendChild(link);
}
addStyle('/dani/test.css');
Завантаження за допомогою AJAX
У вище вказаному методі було створено елемент link. Розглянемо метод де стилі CSS завантажуються за допомогою AJAX і додаються до веб-сторінки елементом style.
Даний метод дозволяє асинхронно завантажувати файли CSS.
function loadCSS(href){
var ajax=new XMLHttpRequest();
ajax.open('get', href);
ajax.onload=function(){
var style=document.createElement('style');
style.innerHTML=this.responseText;
document.body.appendChild(style);
};
ajax.send(null);
}
loadCSS('/dani/test.css');