Форум

localhost2020 · #1 (**permalink**) 04.12.2020, 20:13

Привет!
как добавить document.getElementByClassName к следущему коду: Учитывать нужно чтобы было и documen.getElementById и document.getElementByClassName Спасибо!

<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">Testing</div>
<div id="opopops">Testing</div>

const themes = {
    gray: 'theme--gray',
    red: 'theme--red',
    green: 'theme--green',
    blue: 'theme--blue'
}

const themeElements = [
    document.getElementById('opops'),
    document.getElementById('opopops'),
];

const themeFromStorage = localStorage.getItem('theme');

const defaultTheme = themes[themeFromStorage] || themes.gray;

themeElements.forEach(element => element.classList.add(defaultTheme));

const themeSwitchers = document.querySelectorAll('[data-theme]');

for (const switcher of themeSwitchers)
    switcher.addEventListener('click', switchThemeHandle);

function switchThemeHandle(e) {
    const { theme } = e.target.dataset;
    
    if (!Object.keys(themes).includes(theme)) {
        console.error('Ошибка смены темы. Тема не найдена.');
        return;
    }

    themeElements.forEach(element => {
        element.className = element.className.replace(/([theme\-\-]+[a-z]+)/, '');
        element.classList.add(themes[theme]);
    });
    
    localStorage.setItem('theme', theme);
  
    
}

.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; }

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


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

#opops {
    left: 0;
}

#opopops {
    right: 0;
}

как сделать чтобы работал с ByID и ByClassName

рони · #2 (**permalink**) 04.12.2020, 20:34

localhost2020,
document.querySelectorAll

localhost2020 · #3 (**permalink**) 04.12.2020, 20:43

Сообщение от рони

localhost2020,
document.querySelectorAll

Сделал так:

const themeElements = [
    document.getElementById('opops'),
    document.getElementById('opopops'),
    document.querySelectorAll('ipsWidget_title'),
];

Не работает, код перестаёт работать...

рони · #4 (**permalink**) 04.12.2020, 21:01

localhost2020,

const themeElements = document.querySelectorAll('#opops, #opopops,.ipsWidget_title');

рони · #5 (**permalink**) 04.12.2020, 21:08

localhost2020,
цикл forEach можно убрать, если присвоить всем нужным элементам, один и тот же класс. а менять параметры, только у общего родителя, этих элементов.

рони · #6 (**permalink**) 04.12.2020, 21:15

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; }
.opops {
    width: 200px;
    height: 50px;
    background-color: var(--color, 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 class="opops">Testing</div>
<div class="opops">Testing</div>
 <script>
const themes = {
    gray: 'gray',
    red: 'red',
    green: 'green',
    blue: 'blue'
}
const themeFromStorage = localStorage.getItem('theme');
let defaultTheme = themes[themeFromStorage] || themes.gray;
const setTheme = theme => document.body.style.setProperty('--color', theme);
setTheme(defaultTheme);
const themeSwitchers = document.querySelector('.themes');
function switchThemeHandle(e) {
    const { theme } = e.target.dataset;
    if (!themes[theme]) {
        console.error('Ошибка смены темы. Тема не найдена.');
        return;
    }
    defaultTheme = themes[theme];
    setTheme(defaultTheme)
    localStorage.setItem('theme', theme);
}
themeSwitchers.addEventListener( "click" , switchThemeHandle);
  </script>
</body>
</html>

localhost2020 · #7 (**permalink**) 04.12.2020, 22:37

Сообщение от рони

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; }
.opops {
    width: 200px;
    height: 50px;
    background-color: var(--color, 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 class="opops">Testing</div>
<div class="opops">Testing</div>
 <script>
const themes = {
    gray: 'gray',
    red: 'red',
    green: 'green',
    blue: 'blue'
}
const themeFromStorage = localStorage.getItem('theme');
let defaultTheme = themes[themeFromStorage] || themes.gray;
const setTheme = theme => document.body.style.setProperty('--color', theme);
setTheme(defaultTheme);
const themeSwitchers = document.querySelector('.themes');
function switchThemeHandle(e) {
    const { theme } = e.target.dataset;
    if (!themes[theme]) {
        console.error('Ошибка смены темы. Тема не найдена.');
        return;
    }
    defaultTheme = themes[theme];
    setTheme(defaultTheme)
    localStorage.setItem('theme', theme);
}
themeSwitchers.addEventListener( "click" , switchThemeHandle);
  </script>
</body>
</html>

работает нормально, а как сделать чтобы в Style для какого-то класса, за пример возьмём .opops к которому надо задать background/border/color для кнопки GRAY или RED. Как тут было:

#opops.theme--gray { background-color: #95a5a6; }

рони · #8 (**permalink**) 04.12.2020, 23:45

localhost2020,

.theme--gray #opops { background-color: #95a5a6; }

и удаляйте класс у body, затем добавляйте.

рони · #9 (**permalink**) 05.12.2020, 00:13

Сообщение от localhost2020

как сделать чтобы в Style для какого-то класса, за пример возьмём .opops к которому надо задать background/border/color для кнопки GRAY или RED. Как тут было:
#opops.theme--gray { background-color: #95a5a6; }

не понимаю.

localhost2020 · #10 (**permalink**) 05.12.2020, 00:54

Сообщение от рони

не понимаю.

Код который я дал, работает так:

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

каждому цвету можно сделать стили по разному.

А в коде который вы мне дали как работает CSS?
Как сделать для какого-то класса и для конкретного цвета.... Стили по разному.
Для ясности, вот пример:
Берем этот код:

<button class="gray" data-theme="gray">GRAY</button>

и Class

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

Вот это Class .opops сделать стили под кнопку GRAY где можно будет сделать для неё:

background: #fff; border: 4px solid blue; color: red;

А для Кнопки RED и тоже самый Class .opops сделать другой стили.
Думаю понятно написал.

Форум

Справочник

Discord чат

Курсы javascript