Проверить значение CSS в javascript
Я хочу, чтобы JavaScript проверял мой код CSS и возвращал меня, если цвет фона = # 222327, он изменит цвет фона на # 29fd53. Но если старый цвет фона = # 29fd53, он изменит цвет фона на # 222327.
Мой Js-код
function changeBgC(){
var body = document.getElementsByTagName("body")[0];
var computedStyle = window.getComputedStyle(body)
var bodyBackgroundValue = computedStyle.getPropertyValue("background-color")
console.info(bodyBackgroundValue);
if (bodyBackgroundValue == "#222327") {
document.querySelector('body').style.backgroundColor = "#29fd53"
} else {
document.querySelector('body').style.backgroundColor = "#222327"
}
}.body{
width: 100%;
height: 100vh;
min-height: 100vh;
background: #222327;
}<div class = "box">
<button onclick = "changeBgC()" class = "menuButton">≣</button>
</div>
Я просто пытаюсь использовать i++ (я использую onclick в своем html-коде), но он только меняет цвет фона на # 29fd53. При повторном нажатии на кнопку ничего не происходит.
Вот что я пытаюсь
function changeBgC(){
var i = 0
if (i % 2 === 0){
document.querySelector('.body').style.backgroundColor = "#29fd53"
console.info(i);
i+=1
}else{
document.querySelector('.body').style.backgroundColor = "#222327"
i+=1
}
}
Проверьте значение, которое возвращает getComputedStyle(), скорее всего, это значение rgb(), а не шестнадцатеричный код.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Ваша проблема заключается в установке переменной i внутри области действия функции. Поэтому каждый раз, когда вы вызываете changeBgC(), он устанавливает i = 0.
Объявите i вне функции, и это должно работать
let i = 0;
function changeBgC(){
if (i % 2 === 0){
document.querySelector('.body').style.backgroundColor = "#29fd53"
console.info(i);
i+=1
}else{
document.querySelector('.body').style.backgroundColor = "#222327"
i+=1
}
}
Этого можно добиться, используя class вместо function. Таким образом, переменная i может быть инкапсулирована. Я использовал закрытые члены (#), так как они не требуются вне класса.
class backg {
#i=0;
#elem=document.body.style;
change() {
this.#i=!this.#i;
this.#elem.backgroundColor = this.#i?"#29fd53":"#222327";
}
}
bkg=new backg();.body{
width: 100%;
height: 100vh;
min-height: 100vh;
background: #222327;
}<div class = "box">
<button onclick = "bkg.change();" class = "menuButton">≣</button>
</div>
как упоминалось выше @Teemu getComputedStyle() возвращает значение rgb()
поэтому, чтобы получить HEX-код, вы можете использовать переменную css, а не писать функцию для преобразования из RGB в HEX,
функция обрезки, используемая для удаления конечных пробелов
function changeBgC(){
let bgColor = getComputedStyle(document.body).getPropertyValue('--bg-color').trim();
if (bgColor == "#222327"){
document.body.style.setProperty('--bg-color', '#29fd53');
} else {
document.body.style.setProperty('--bg-color', '#222327');
}
}body{
--bg-color: #222327;
width: 100%;
height: 100vh;
min-height: 100vh;
background-color: var(--bg-color);
}<div class = "box">
<button onclick = "changeBgC()" class = "menuButton">≣</button>
</div>Вы не должны использовать JavaScript для прямого изменения стилей элементов с целью переключения тем.
Однако лучшим решением для переключения тем является использование переменных CSS вместо прямого изменения стилей элементов с помощью JavaScript.
Этот подход имеет несколько преимуществ, включая более высокую производительность, более простое обслуживание и большую гибкость. Вот пример того, как вы можете использовать переменные CSS для переключения между светлой и темной темами:
- Используйте переменные CSS для изменения цвета:
.theme-light {
--bg-primary: #29fd53;
}
.theme-dark {
--bg-primary: #222327;
}
body {
background: var(--bg-primary);
}
- Переключение между темами:
function switchTheme() {
let themes = ['theme-light', 'theme-dark'];
let currentTheme = [...document.body.classList].find(c => themes.includes(c)) ?? themes[0]
let nextTheme = themes[themes.indexOf(currentTheme)+1] ?? themes[0]
document.body.classList.remove(...themes) // removes all theme classes, including the current one
document.body.classList.add(nextTheme)
}
- Фрагмент HTML:
<div class = "box">
<button onclick = "switchTheme()" class = "menuButton">≣</button>
</div>
- Не забудьте добавить начальный класс для тела с одной из тем:
<body class = "theme-light">
<body class = "theme-dark">
вы повторно объявляете
iкак 0 при каждом вызове функции, чтобы он никогда не увеличивался. Также вы меняете стильbodyили какой-то элемент сclass = "body"?