Смена стилей CSS с запоминанием на Cookie
Скрипт не новый но рабочий, Суть его заключается в том, что при нажатии на кнопку он подгружает именно изменённые стили. То есть, Вам нужно прописывать не весь CSS для каждого отдельного цвета, а только тот, который необходимо изменить. Скрипт очень удобный .
Установка :
1. Вставим код в Верхнюю часть сайта в самый низ:
2. Установим этот HTML-код ниже самого скрипта:
3. Ну и вот последний шаг - Ставим CSS-код для кнопок:
По умолчанию кнопки расположены фиксировано. Ну, они выводятся в правом верхнем углу и прикреплены независимо от прокрутки содержимого сайта.
Вы можете это изменить на свой вкус в строчке .turbo-s_smena {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();
span</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();
span</script>
2. Установим этот HTML-код ниже самого скрипта:
Код
<div class="turbo-s_smena">
<div class="red" onclick="changeCSS('/ссылка на стиль в формате .css')"></div>
<div class="green" onclick="changeCSS('/ссылка на стиль в формате.css')"></div>
</div>
<div class="red" onclick="changeCSS('/ссылка на стиль в формате .css')"></div>
<div class="green" onclick="changeCSS('/ссылка на стиль в формате.css')"></div>
</div>
3. Ну и вот последний шаг - Ставим CSS-код для кнопок:
Код
.turbo-s_smena {position: fixed; top: 50px; right: 50px;}
.turbo-s_smena div {border-radius: 3px; width: 25px; height: 25px; margin-left: 5px; float: left; cursor: pointer;}
.turbo-s_smena .red {background: #da3c3c;}
.turbo-s_smena .green {background: #3cda3c;}
.turbo-s_smena div {border-radius: 3px; width: 25px; height: 25px; margin-left: 5px; float: left; cursor: pointer;}
.turbo-s_smena .red {background: #da3c3c;}
.turbo-s_smena .green {background: #3cda3c;}
По умолчанию кнопки расположены фиксировано. Ну, они выводятся в правом верхнем углу и прикреплены независимо от прокрутки содержимого сайта.
Вы можете это изменить на свой вкус в строчке .turbo-s_smena {position: fixed; top: 50px; right: 50px;}
Скачать бесплатно - [.]
без регистрации через 5 сек.
Или скачать без ожидания.
Или скачать без ожидания.
