Изменить таблицу стилей в зависимости от месяца / сезона в jQuery

Question

Я пытаюсь найти способ изменить таблицы стилей в зависимости от сезона, с которым работает jquery, потому что на данный момент неизвестно, могу ли я вообще использовать php или ruby ​​на этом сайте. Спасибо за ваши ответы!

Answer 1

Самое простое - расширить ваши стили CSS и добавить класс на высоком уровне. Я обычно делаю это в элементе body . CSS выглядит так:

body.summer ul { background-color: green; }
body.fall   ul { background-color: orange; }
body.winter ul { background-color: white; }
body.spring ul { background-color: pink; }

Затем используйте JS, чтобы установить класс тела:

...</body>
<script ...>
var season = (new Date()).getMonth...;
$('body').addClass(season);
</script>
</html>

Как видите, я разместил это сразу после закрытия тега body. Я думаю, что это первое место, где вы можете поставить его и заставить его работать, но вам придется проверить. Причина для того, чтобы поместить его здесь, состоит в том, чтобы предотвратить флеш нестандартного контента - если у вас много страниц на странице, вы захотите выполнить этот Javascript перед обратным вызовом при готовности. Тем не менее, у меня на самом деле не было особых проблем, просто поместив большую часть своего кода в готовый обратный вызов.

Вы также можете легко загружать разные таблицы стилей - вероятно, в одном месте. Просто создайте узел стиля и вставьте его в заголовок как последний узел. Вы бы сделали это, если у вас есть серьезные различия между вашими стилями. Довольно сложно поддерживать.

$("head").append("<style type=\"text/css\" src=\"" + season + ".css\"">");

Answer 2

поместите все ваши декларации в один CSS в виде

.someStyle{ color:blue;}    
.summer .someStyle{color:yellow;}
.winter .someStyle{color:purple;}
...

все классы в .summer будут переопределять стиль по умолчанию для лета
затем на сервере / клиенте, когда страница готова - добавьте этот класс в тело

единственная проблема с этим на клиенте заключается в том, что стиль по умолчанию будет отображаться первым, а затем переключаться на новый (просто выберите сезон, наиболее распространенный для пользователей вашего сайта - если бы это был Израиль, я бы выбрал лето ;-)

Answer 3

Я бы посоветовал вам сузить элементы, которые вы хотите изменить на странице, поскольку CSS-файл уже будет загружен, а jQuery будет просто применять CSS после загрузки статического CSS.Вы можете оставить эти конкретные объявления стилей вне CSS или оставить их по умолчанию.Например, если фоновое изображение меняется, вы можете установить его в белый цвет в объявлении CSS по умолчанию.Таким образом, при загрузке он выглядит нормально, и вы используете только JavaScript для загрузки необходимых элементов.

Затем можно использовать функцию месяца JavaScript, чтобы получить текущий месяц

var month = new Date();
month = month.getMonth();

ТогдаВы можете использовать jQuery для применения этих стилей к голове с помощью функции готовности jQuery.У вас может быть простой переключатель оператора if / else, чтобы выбрать один из четырех операторов в зависимости от номера месяца.Например, если вы хотите изменить фон

$("head").append("<style type=\"text/css\">body {background-color: #FFF !important;}</style>");

Просто краткий пример, но это сделает его более эффективным, чем загрузка всего листа, я думаю.