Включение и выключение таблиц стилей

117
12 января 2017, 03:47
function enableSS(sheetid, enabled) { document.getElementById(sheetid).disabled = !enabled;
}

<form>
<input type="checkbox" onclick="enableSS('ss0', this.checked)">style0<br>    
<input type="checkbox" onclick="enableSS('ss1', this.checked)">style1<br>
<input type="checkbox" onclick="enableSS('ss2', this.checked)">style2<br>
</form>              
<link id="ss0" rel="stylesheet" href="/css/style0.css">
<link id="ss1" rel="stylesheet" href="/css/style1.css">
<link id="ss2" rel="stylesheet" href="/css/style2.css">

Как можно сделать переключение css не input-ом, а списком li ну или хотябы ссылкой. Т.е на какую нажал тот файл стилей и загрузился.

Как нибудь так

<ul class="colors">
    <li>style0</li>                    
    <li>style1</li>
    <li>style2</li>
</ul>
Answer 1

Событие load отслеживает когда загрузилась страничка, можно и раньше начать загружать нужный стиль, который мы возьмем из localStorage

// Сохранение темы в localStorage
const saveCssTheme = function (theme) {
    localStorage.cssTheme = theme;
}
// Получение темы из localStorage, либо дефолтной
const getCssTheme = function () {
    return localStorage.cssTheme || 'default-theme';
}
// Загрузка css файла
const loadCssTheme = function (theme) {
    const link = document.createElement('link');
    link.id = theme;
    link.type = "text/css";
    link.rel = 'stylesheet';
    link.href = `/css/${theme}.css`;
    // если мы уже загрузили стили, то не нужно делать это еще раз
    if(document.getElementById(theme)) return;
    document.head.appendChild(link);
}
// Установка темы
const setCssTheme = function(theme) {
    loadCssTheme(theme);
    saveCssTheme(theme);
    document.body.setAttribute('class', theme);
}
// Использование при загрузке страницы
document.addEventListener("load", function () {
    const theme = getCssTheme();
    setCssTheme(theme);
});

В css пусть по умолчанию будет стандартная тема, остальные же будут выглядеть так

body.theme a {} // стиль примениться к элементу a, только если у body есть класс theme
body.theme h1 {}

UPD
Кнопки для включения

<ul class="colors">
    <li onclick="setCssTheme('theme0')">style0</li>                
    <li onclick="setCssTheme('theme1')">style1</li>
    <li onclick="setCssTheme('theme2')">style2</li>
</ul>
READ ALSO
Проблемы с отображением шрифта

Проблемы с отображением шрифта

При подключении шрифта в таком варианте

147
Сборщик мусора вызывает CallbackOnCollectedDelegate

Сборщик мусора вызывает CallbackOnCollectedDelegate

В проекте нужно перехватывать глобально нажатие определенной клавиши, на определенном этапе приложение на третьем нажатии начало выдавать...

152
TimeLine в виде кадров из mediaelementa

TimeLine в виде кадров из mediaelementa

На скрине ниже есть таймлайн в виде кадров, как сделать такой же? Любые идеиСамо приложение называется Effects Videos – Filters for Videos из винстора и судя...

96
Сортировка списка c#

Сортировка списка c#

У меня есть список, который содержит строкиКаким способом можно отсортировать элементы в этом списке по длине?

133