Смена стилей CSS с запоминанием на Cookie
Скрипт не новый, я нашёл его на просторах интернета и решил поделиться с Вами. Суть его заключается в том, что при нажатии на кнопку он подгружает именно изменённые стили. То есть, Вам нужно прописывать не весь CSS для каждого отдельного цвета, а только тот, который необходимо изменить. Я думаю понятно.
Установка
1. Первым делом вставим нижеприведенный код в Верхнюю часть сайта в самый низ:
2. Второй шаг - установим этот HTML-код ниже самого скрипта:
3. И последнее - CSS-код для стилизации кнопок:
По умолчанию я расположил кнопки фиксировано. То есть, они выводятся в правом верхнем углу и прикреплены независимо от прокрутки содержимого сайта.
Вы можете это изменить на свой вкус в строчке .themes {position: fixed; top: 50px; right: 50px;}
Установка
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>
<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>
<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;}
.themes div {border-radius: 3px; width: 25px; height: 25px; margin-left: 5px; float: left; cursor: pointer;}
.themes .red {background: #da3c3c;}
.themes .green {background: #3cda3c;}
По умолчанию я расположил кнопки фиксировано. То есть, они выводятся в правом верхнем углу и прикреплены независимо от прокрутки содержимого сайта.
Вы можете это изменить на свой вкус в строчке .themes {position: fixed; top: 50px; right: 50px;}
-D-I-N-I-S-
13.04.16 в 20:58
1.4k
0
Источник