Переключение между файлами css

Переключение CSS файлов через js?

Как грамотно сделать переключение css файлов без перезагрузки? Например как тут themevip.co слева белый квадратик.

например? а не вариант объяснить тогда а не умничать, если уж на вопросы отвечаешь? смысл тут писать если толку от этого 0?

thehighhomie: классы, надо менять классы
каждый раз грузить новый файл — это маразм и идиотия, особенно когда можно просто пару тройку лишних строк стилей запихать в класс и в одну строку его поменять на JS.

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');

но мне кажется это не очень будет с точки зрения производительности, надо их наверное как то подзагрузить сразу?

А можно сделать селектор сразу на несколько правил, что не писать каждый раз
body.type1 div.class1 <>
body.type1 div.class2 <>?

Евгений Обыкновенный: если вложить селекторы в какой-нибудь элемент, то лучше воспользоваться препроцессором вроде Less или Sass.

thehighhomie: Если вам просто надо загружать разные CSS, вы их берете и загружаете. Если хотите их кешировать, то сначала загружаете все нужные CSS в пустой iframe, должно сработать. Если хотите изменять существующие стили, то оперируете со styleSheet. Где-то в тех степях есть возможность поставить флажок типа «не использовать этот styleSheet», если вдруг вы все таки захотите использовать много элементов

thehighhomie: кстати, на сайте который вы привели в пример, делается именно так, как сказал этот чувак: при нажатии на кнопку цвета с снимаются все классы и добавляется один нужный.

Источник

prowebber.cc — Тут есть все для настоящих вебмастеров

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

PROWEBBER » DataLife Engine » jQuery styleswitch – переключение между файлами стилей CSS

jQuery styleswitch – переключение между файлами стилей CSS

Данный материал предоставлен сайтом ProWebber.cc исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое. Скачать бесплатно jQuery styleswitch – переключение между файлами стилей CSS.

Суть хака проста – одним кликом можно переключаться между файлами стилей CSS, в результате чего изменяется дизайн сайта. При этом, что самое важное, последний использованный (включенный) юзером дизайн сохраняется.

Практическое применение нереально просто: включаем воображение и придумываем что-то типа смена времён года по клику, либо что-нибудь простое типа смены дизайна сайта.
В общем придумывай и юзай.

Установка:
Качаем архив с двумя .js файлами и кидаем папку с ними либо в корень либо в шаблон.
Прописывам путь к ним в main.tpl или в файле котором будет применяться данный хак:

#st2 background-color:#ff9900; 
color: #ffffff; 
font-size: 12px; 
font-family: tahoma; 
padding-left: 6px;
>

И тогда блок на сайте который будет меняться при переключении, ну или вообще глобально весь body берем в div‘ы:

Блок или текст который будет изменяться при нажатии

Missing update?
Checkout our NULLED Web Community

Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных

Источник

Переключение таблицы стилей по клику. Как реализовать?

Есть сайт и 7 цветовых схем. Необходимо реализовать, чтобы при клике на кнопку подключался внешний css файл, который поменяет стиль, согласно своему содержанию. Таких кнопок соответственно будет 7, как css файлов. Подскажите как реализовать.

var link = document.createElement("link") link.type = "text/css" link.rel = "stylesheet" link.href = url document.getElementsByTagName("head")[0].appendChild(link)

Где url — адрес к файлу стилей

Спасибо Макс Минимус за подсказку.
Рецепт следующий:

var cssUrls = [] var loadCss = function(url) < var ind = cssUrls.indexOf(url) if(ind == -1) < cssUrls.push(url) var link = document.createElement("link") link.id = ('css' + cssUrls.length) link.type = "text/css" link.rel = "stylesheet" link.href = url document. getElementsByTagName("head")[0].appendChild(link) >else < document.getElementById('css' + ind).disabled = !document.getElementById('css' + ind).disabled >> loadCss('/css/colors/darkblue.css')

Писал без проверки с мобилы. Так что если есть ошибки, не серчайте :). Работает по принципу «Если нет, добавил, если есть, отключил или подключил»

> так как отключить их некак.

Стили отключаются если удалить соответсвующий style элемент который их подключил.

Изращениями какими-то занимаетесь. Я более чем уверен что вся цветовая схема влезает в пару строчек стилей, и мучать юзера дополнительным http реквестом при каждой смене темы это очень плохая идея. Просто сделайте для каждой цветовой схемы глобальные классы для body или основного контейнера и по клику меняйте их. Выбранную схему просто потом сохраняете в localStorage или вообще на сервере можете даже хранить, если юзер логинится.

фленаган — включение и выключение таблиц стилей — стр 472

стиль это элемент укоторого есть id и есть свойство disabled

вот ведь двоишники какие ржунимагу

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

Я бы цветовую схему засунул бы под класс и его добавлял бы в body тот же, поменял класс — поменял схему.

Источник

Переключение стилей css с помощью jquery

На одном из проектов (да на том самом osinform.ru) возникли споры по выбору стиля внешнего вида (ну темный или светлый) … помучившись немного (дней так 10) с шаблоном я все же решился сделать 2 шаблона, но потом как представил … очередные шаблоны, лишняя нагрузка и так далее … ну и в итоге решил сделать просто 2 css стиля …

Нашел я один java скрипт у себя на компе, но он у меня так и не завелся (ну из за подключенной jquery). Ну в итоге проведя ритуал в google нашел неплохое решение …
Кстати при выборе картинки для этой статьи я нашел некую картинку с текстом «Переключение между файлами стилей CSS для DataLife Engine». Не понимаю, почему только для DLE ?! … В общем затер эти надписи, так что автор данной картинки — не обижайся …

Ладно перейдем к делу … Нам нужно сделать ссылки которые будут переключать стили и смогут работать с Cookies!
Для начала заготовим несколько стилей для нашего сайта. Пусть их будет 3 …
Для элементов присвоим ну и сам стиль «по умолчанию» подключаем на прямую в head:

<link type="text/css" rel="stylesheet" media="screen" title="style-default" href="style-default.css" />

Главное не потерять атрибут title в элементе , иначе ничего не заработает.

Теперь подключим другие стили с помощью функций jquery:

<!-- Переключение css - подключаем стили --> <script type="text/javascript"> $(document).ready(function() < var inject = $('#init'); var skinsPath = '/tenplates/lite/css/'; //путь к директории со стилями inject.append( '<link type="text/css" rel="stylesheet" media="screen" title="style-1" href="'+ skinsPath+'style-1.css" />' + '<link type="text/css" rel="stylesheet" media="screen" title="style-2" href="'+ skinsPath+'style-2.css" />' + '<link type="text/css" rel="stylesheet" media="screen" title="style-3" href="'+ skinsPath+'style-3.css" />' + ); >); </script>

Теперь добавим функцию jQuery переключения CSS стилей:

/* Switch Styles*/ $(function($) < $(document).ready(function() < $('.styleswitch').click(function() < $("#header").fadeOut(700); switchStylestyle(this.getAttribute("rel")); $("#header").fadeIn(900); return false; >); var c = readCookie(‘style’); if (c) switchStylestyle(c); >); function switchStylestyle(styleName) < $('link[rel*=style][title]').each(function(i) < this.disabled = true; if (this.getAttribute('title') == styleName) this.disabled = false; >); createCookie(‘style’, styleName, 365); > >)(jQuery); /* cookie style core */ function createCookie(name,value,days) < if (days) < var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); >else var expires = «»; document.cookie = name+»=»+value+expires+»; path=/»; > function readCookie(name) < var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i &lt; ca.length;i++) < var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); >return null; > function eraseCookie(name)

Автор данного способа добавил анимацию fadeIn и fadeOut для региона header в моём шаблоне. Это сглаживает прогрузку фонового изображения и делает переключение более плавным. Можете вписать туда body, если изменяющихся участков много.

Теперь добавим сами переключатели:

<!--noindex--> <a href="#" rel="style-default" s2">Белая версия</a> | <a href="#" rel="style-1" s1">Темная версия</a> | <a href="#" rel="style-2" s3">Красная версия</a> | <a href="#" rel="style-3" s4">Зеленая версия</a> <!--/noindex-->

Класс styleswitch используется для установки события click, атрибут rel должен содержать имя стиля синхронизируемое с title в . Ссылки можно обвернуть списком или вовсе сделать кнопками и запилить для них CSS по вкусу. Я также завернул их в noindex, чтобы не индексировать несемантичную функциональность.

Проверенно на всем что есть кроме IE (у меня линь 🙂 …)

Источник