filter: ...;
Здравствуйте! Совсем недавно услышал о таком 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? Там жеж функция, не переменная... |
ABitOfJS,
в строке 14 пропущены важные символы!!! |
' '
|
В общем, код я исправил:
<!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 с одним и тем же класом. Как быть с этим? |
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>
|
| Часовой пояс GMT +3, время: 20:43. |