• Страница 1 из 1
  • 1
Переключение таблицы стилей по клику.
Luego Оффлайн
Проверенный
0
Дата: Вторник, 2016-05-03, 01:33 | Сообщение # 1
Есть сайт и 7 цветовых схем. Необходимо реализовать, чтобы при клике на кнопку подключался внешний css файл, который поменяет стиль, согласно своему содержанию. Таких кнопок соответственно будет 7, как css файлов. Подскажите как реализовать.
Профиль
azone Оффлайн
Проверенный
2
Дата: Вторник, 2016-05-03, 02:52 | Сообщение # 2
УСТАНОВКА
1. Первым делом вставим нижеприведенный код в Верхнюю часть сайта в самый низ:
Код
<link id="change" rel="StyleSheet" href="" />  
<script>  
function changeCSS(url) {
  if (!arguments.length) {
  url = (url = document.cookie.match(/\bchange=([^;]*)/)) && url[1];
  if (!url) return '';
  }
  document.getElementById('change').href = url;
  var d = new Date();
  d.setFullYear(d.getFullYear() + 1);
  document.cookie = ['change=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');
  return url;
}
changeCSS();
</script>


2. Второй шаг - установим этот HTML-код ниже самого скрипта:

Код
<div class="themes">
<div class="red" onclick="changeCSS('/red.css')"></div>
<div class="green" onclick="changeCSS('/green.css')"></div>
</div>


3. И последнее - CSS-код для стилизации кнопок:

Код
.themes {position: fixed; top: 50px; right: 50px;}
.themes div {border-radius: 3px; width: 25px; height: 25px; margin-left: 5px; float: left; cursor: pointer;}
.themes .red {background: #da3c3c;}
.themes .green {background: #3cda3c;}


Городской портал Твій Київ
admin@tviy.kiev.ua
info@tviy.kiev.ua
Профиль
Luego Оффлайн
Проверенный
0
Дата: Вторник, 2016-05-03, 21:27 | Сообщение # 3
Нашел вариант, может кому-то пригодится:

Код

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


Сообщение отредактировал Luego - Вторник, 2016-05-03, 21:27
Профиль
  • Страница 1 из 1
  • 1
Поиск: