Статьи / JavaScript

Динамическая подгрузка CSS файла стилей

Иногда требуется во время работы программы, без перезагрузки страницы подгрузить нужные CSS стили. В этом нам поможет небольшая функция, которая должна быть понятна даже новичку в программировании javascript.

Вот её код:

function CSSLoad(file){
	var link = document.createElement("link");
	link.setAttribute("rel", "stylesheet");
	link.setAttribute("type", "text/css");
	link.setAttribute("href", file);
	document.getElementsByTagName("head")[0].appendChild(link)
}

CSSLoad('/addStyles.css'); //пример использования

Сначала мы создаем элемент link и устанавливаем ему необходимые атрибуты(тип, указатель на файл). Затем добавляем к тегу head, как ребенка, созданный элемент. Собственно загрузка CSS файла начинается именно в этот момент. В функцию передается всего один аргумент указывающий где расположен файл со стилями.