На новогодних праздниках, многие сайты слегка меняли свои дизайны. Приделывали шапочки, красные носочки, снежинки, мышек и прочую новогоднюю атрибутику. Делали они это, чаще всего, вручную.
Алексей Ильин написал заметку, где предлагал дописывать в body класс с текущей датой. Можете подробней ознакомиться с этой статьей, а я пока расскажу, почему мне не понравился этот подход.
Во-первых, он предполагает возню с php-скриптами. Не так легко найти в стороннем скрипте место, где нужно что-то как-то изменить. Особенно, если ты в программировании ноль. Кроме того, это решение подразумевает, что каждый день будет генерироваться название класса, а сам класс, скорее всего, не будет определен, что не кошерно.
В этой заметке я расскажу сразу о двух способах решения задачки автоматической смены стилей без использования серверных сценариев. То есть, с помощью JavaScript.
Один раз прописать стили для всех праздников. А потом только смотреть, как они меняются. Нельзя править серверные скрипты.
Есть два стиля:
body {}
и
body.hewyear {}
Если вдуматься, то дописав класс newyear к body, мы можем изменить отображение всех элементов на странице, определив для них стили:
было a {color: blue;}
стало body.newyear a {color: red;}
Думаю, смысл понятен.
Остается только придумать, как дописать к элементу body новый класс.
Создадим объект JavaScript, полями которого будут строки формата "день.месяц", а ключами — имена классов, которые нужно дописать к body.
var holydays = {
'1.1':'ny', //новый год
'8.3':'8march', //8 марта
'3.2':'dr' //мой день рождения ;)
}
Теперь приведу код, приправленный комментариями.
var d = document;
window.onload = function() {
var body = d.body; //хватаем DOM-элемент body
var dat = new Date(); //создаем объект даты
var m = dat.getMonth(); //какой сегодня месяц? январь = 0
m++; //приводим месяц в человеческий формат. январь = 1
var day = dat.getDate(); //узнаем день месяца
var curclass = holydays[day+'.'+m];
if(curclass) body.className = curclass;
}
В предпоследней строчке мы вытаскиваем из объекта holydays значение (имя класса), соответствующее текущей дате. Если в объекте не будет такого поля, то curclass будет undefined. Если имя класса мы получили, то присваиваем его body.
К недостаткам этого способа можно причислить:
Задумавшись над вторым недостатком, я наваял второй вариант того же скрипта.
Я подумал, что все праздничные определения стилей можно вынести в отдельный файл стилей. Например, holyday.css. Тогда, после загрузки страницы, нам нужно подключить другой стиль и все! Вот как я модифицировал скрипт:
window.onload = function() {
//получаем DOM-элемент head
var head = d.getElementsByTagName('head')[0];
var dat = new Date();
var m = dat.getMonth();
m++; //приводим месяц в человеческий формат. январь = 1
var day = dat.getDate();
//выясняем, является ли день праздником
var curclass = holydays[day+'.'+m];
if(curclass) //если является
{
//создаем новый элемент link
var newlink = d.createElement('link');
//задаем его параметры
newlink.href = "holyday.css";
newlink.rel = "stylesheet";
newlink.type = "text/css";
//пихаем его в башку
head.appendChild(newlink);
//раскомментируйте, чтобы увидеть, что вставилось:)
//alert(head.innerHTML);
}
}
В файле holyday.css переопределяем нужные нам стили. Так как этот стиль будет подключаться после основного, все определения, при совпадении имен селекторов и правил, будут переопределены.
В довершение, конечно, даю скачать те файлы, с которыми я игрался, пока писал статью.