Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 05.12.2020, 07:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от localhost2020
Думаю понятно написал.
Сообщение от рони
.theme--gray #opops { background-color: #95a5a6; }

и удаляйте класс у body, затем добавляйте.
Ответить с цитированием
  #12 (permalink)  
Старый 05.12.2020, 08:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

localStorage смена css
localhost2020,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
.themes {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

.themes > * {
    margin: 0 10px;
}

.themes button {
    padding: 12px 24px;
    border-width: 1px;
    border-style: solid;
    outline: none;
    color: #fff;
    cursor: pointer;
}

.themes .gray { background-color: #95a5a6; border-color: #7f8c8d; }
.themes .red { background-color: #e74c3c; border-color: #c0392b; }
.themes .green { background-color: #2ecc71; border-color: #27ae60; }
.themes .blue { background-color: #3498db; border-color: #2980b9; }
.themes .unknown { background-color: #9b59b6; border-color: #8e44ad; }

.theme--gray .opops { background-color: #95a5a6; }
.theme--red .opops{ background-color: #e74c3c; }
.theme--green .opops{ background-color: #2ecc71; }
.theme--blue .opops{ background-color: #3498db; }

.theme--gray #opopops { border: red solid 5px; color: #FFD700;}

.opops {
    width: 200px;
    height: 50px;
    background: red;
    position: absolute;
    top: 0;
}

.opops + .opops{
    right: 0;
}

</style>
</head>
<body>
<div class="themes">
        <button class="gray" data-theme="gray">GRAY</button>
        <button class="red" data-theme="red">RED</button>
        <button class="green" data-theme="green">GREEN</button>
        <button class="blue" data-theme="blue">BLUE</button>
        <button class="unknown" data-theme="unknown">unknown</button>
</div>

<div id="opops" class="opops">Testing</div>
<div id="opopops" class="opops">Testing</div>

<script>
/*const themeElements = document.querySelectorAll('#opops, #opopops,.ipsWidget_title');
themeElements.forEach(elem => elem.classList.add('opops'));*/


const themes = {
    gray: 'theme--gray',
    red: 'theme--red',
    green: 'theme--green',
    blue: 'theme--blue'
}
let defaultKeyTheme = localStorage.getItem('theme') || 'gray';
const {classList} = document.body;
const setTheme = key => {
let themeName = themes[defaultKeyTheme];
classList.remove(themeName);
themeName = themes[key];
classList.add(themeName);
defaultKeyTheme = key;
localStorage.setItem('theme', key);
};
setTheme(defaultKeyTheme);
const themeSwitchers = document.querySelector('.themes');
function switchThemeHandle(e) {
        let { theme : key } = e.target.dataset;
        if (!themes[key]) {
                console.error('Ошибка смены темы. Тема не найдена.');
                return;
        }
        setTheme(key)
}
themeSwitchers.addEventListener( "click" , switchThemeHandle);
    </script>
</body>
</html>
Ответить с цитированием
  #13 (permalink)  
Старый 05.12.2020, 08:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

localhost2020,
на всякий случай ...
https://javascript.ru/forum/misc/809...ogikojj-2.html
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск