Documen.getElement
Привет!
как добавить 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 |
localhost2020,
document.querySelectorAll |
Documen.getElement
Цитата:
const themeElements = [
document.getElementById('opops'),
document.getElementById('opopops'),
document.querySelectorAll('ipsWidget_title'),
];
Не работает, код перестаёт работать... |
localhost2020,
const themeElements = document.querySelectorAll('#opops, #opopops,.ipsWidget_title');
|
localhost2020,
цикл forEach можно убрать, если присвоить всем нужным элементам, один и тот же класс. а менять параметры, только у общего родителя, этих элементов. |
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>
|
Цитата:
#opops.theme--gray { background-color: #95a5a6; }
|
localhost2020,
.theme--gray #opops { background-color: #95a5a6; }
и удаляйте класс у body, затем добавляйте. |
Цитата:
|
Цитата:
#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 сделать другой стили. Думаю понятно написал. |
| Часовой пояс GMT +3, время: 12:50. |