Форум

ABitOfJS · #1 (**permalink**) 11.06.2020, 22:45

Здравствуйте! Совсем недавно услышал о таком css-свойстве - filter. Есть вопрос по моему коду:

<!DOCTYPE html>
<html>
<head>
<style>
#block {
width: 100px;
height: 100px;
border: 1px solid black;
background: green;
}
</style>
<script>
function darktheme() {
document.getElementById(block).style.filter = 'invert(100%)';
}
</script>
</head>
<body>
<div id="block"></div>
<input type="button" id="dark" onclick="darktheme()">
</body>
</html>

Вроде всё написано хорошо, но неужели filter работает только с изображениями? Нету ли альтернативы этому С$$-свойству?
Вопрос второй. Допустим, есть альтернатива filter'y. А как тогда сохранить "фильтрованную" позицию div в localStorage? Там жеж функция, не переменная...

рони · #2 (**permalink**) 12.06.2020, 07:25

ABitOfJS,
в строке 14 пропущены важные символы!!!

ABitOfJS · #3 (**permalink**) 12.06.2020, 08:08

ABitOfJS · #4 (**permalink**) 12.06.2020, 10:19

В общем, код я исправил:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.block {
width: 100px;
height: 100px;
border: 1px solid black;
background: white;
color: #292929;
}
</style>
<script>
function darktheme() {
$('.block').css({'background': 'white',
                 'color': '#292929'});
}
function lighttheme() {
$('.block').css({'background': '#292929',
                 'color': 'white'});
}
</script>
</head>
<body>
<div class="block">текст</div>
<div class="block">текст</div>
<div class="block">текст</div>
<input type="button" onclick="darktheme()">
<input type="button" onclick="lighttheme()">
</body>
</html>

Но проблема осталась с localStorage. Несколько раз перечитав статью на learn.javascript.ru всё равно не придумал способ обернуть функцию. Вернее придумал, но там функция относится к 1 единому div'y с уникальным id:

if (localStorage.color) {
    document.getElementById('block').style.backgroundColor = localStorage.color
}
function darktheme() {
    var m = document.getElementById('block');
    m.style.background = "#292929";
    if (localStorage.color == undefined) {
        localStorage.setItem('color', '#292929')
    } else {
        localStorage.color = "#292929"
    }
}
function lighttheme() {
    var m = document.getElementById('block');
    m.style.background = "white";
    if (localStorage.color == undefined) {
        localStorage.setItem('color', 'white')
    } else {
        localStorage.color = "white"
    }
}

А в моём новом варианте несколько div с одним и тем же класом. Как быть с этим?

рони · #5 (**permalink**) 12.06.2020, 11:10

ABitOfJS,

<!DOCTYPE html>
<html>
<head>
<style>
.block {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: white;
color: #292929;
}
.block.dark {
background-color: #292929;
color: white;
}

</style>
<script>
function setTheme(toggle) {
document.querySelectorAll('.block').forEach(elem => elem.classList.toggle('dark', toggle))
localStorage.toggle = toggle;
}
</script>
</head>
<body>
<div class="block">текст</div>
<div class="block">текст</div>
<div class="block">текст</div>
<input type="button" onclick="setTheme(false)" value="light">
<input type="button" onclick="setTheme(true)" value="dark">
<script>
setTheme(localStorage.toggle == 'true')
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript