localStorage
Не могу правильно записать.
Вот есть переключатель что бы менял оформление с темного на светлое, ну и запоминал это. Я сделал переключатель вроде в локал записывает но не запоминает. <!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: #fff;
color: #000;
}
.temny {
background-color: #000;
color: #fff;
}
.blok {
width: 320px;
margin: 0 auto;
}
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
input[type="checkbox"]:focus {
outline: 0;
}
.toggle {
height: 32px;
width: 52px;
border-radius: 16px;
display: inline-block;
position: relative;
margin: 0;
border: 2px solid #474755;
background: linear-gradient(180deg, #2D2F39 0%, #1F2027 100%);
transition: all .2s ease;
}
.toggle:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
}
.toggle:checked {
border-color: #654FEC;
}
.toggle:checked:after {
transform: translatex(20px);
}
</style>
</head>
<body>
<br><br>
<div class="blok">
<div class="tema_oformlenie">
<input type="checkbox" class="toggle" checked>
</div>
<br><br>
Таким образом, укрепление и развитие внутренней структуры говорит о возможностях дальнейших направлений
развития. Внезапно, сторонники тоталитаризма в науке освещают чрезвычайно интересные особенности картины в
целом, однако конкретные выводы, разумеется, представлены в исключительно положительном свете. Внезапно, активно
развивающиеся страны третьего мира и по сей день остаются уделом либералов, которые жаждут быть превращены в
посмешище, хотя само их существование приносит несомненную пользу обществу.
</div>
<script>
window.onload = function () {
if ( localStorage.getItem( "tema_st" ) !== null ) {
let color = localStorage.getItem( "tema_st" );
document.getElementsByTagName( "body" )[ 0 ].classList.add = color;
}
}
document.querySelector(".toggle").onclick = function (){
document.getElementsByTagName("body")[0].classList.add = "temny";
localStorage.setItem("tema_st", "temny");
}
const tema = document.getElementsByTagName( "body" )[ 0 ];
perek = () => {
tema.classList.toggle( "temny" );
}
tema.addEventListener( "click", perek );
</script>
</body>
</html>
|
classList.add - метод, а не свойство.
https://developer.mozilla.org/ru/doc...%D1%80%D1% 8B |
смена темы оформления
Сергей Ракипов,
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: #fff;
color: #000;
}
.temny {
background-color: #000;
color: #fff;
}
.blok {
width: 320px;
margin: 0 auto;
}
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
input[type="checkbox"]:focus {
outline: 0;
}
.toggle {
height: 32px;
width: 52px;
border-radius: 16px;
display: inline-block;
position: relative;
margin: 0;
border: 2px solid #FFFFFF;
background-image: linear-gradient(180deg, #2D2F39 0%, #1F2027 100%);
transition: all .2s ease;
}
.toggle:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: white;
box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
}
.toggle:checked:after{
background-color: #000000;
}
.toggle:checked {
border-color: #000000;
background-image: linear-gradient(180deg, #FFFFFF 0%, #DEDEDE 100%);
}
.toggle:checked:after {
transform: translatex(20px);
}
</style>
</head>
<body>
<br><br>
<div class="blok">
<div class="tema_oformlenie">
<input type="checkbox" class="toggle" checked>
</div>
<br><br> Таким образом, укрепление и развитие внутренней структуры говорит о возможностях дальнейших направлений развития. Внезапно, сторонники тоталитаризма в науке освещают чрезвычайно интересные особенности картины в целом, однако конкретные
выводы, разумеется, представлены в исключительно положительном свете. Внезапно, активно развивающиеся страны третьего мира и по сей день остаются уделом либералов, которые жаждут быть превращены в посмешище, хотя само их существование приносит
несомненную пользу обществу.
</div>
<script>
window.addEventListener("load", function() {
let color = localStorage.getItem("tema_st");
const body = document.body, toggle = document.querySelector(".toggle") ;
if (color) {
body.classList.add(color);
toggle.checked = false;
}
toggle.addEventListener("click", function() {
body.classList.toggle("temny");
color = body.classList.contains("temny") ? "temny" : "";
localStorage.setItem("tema_st", color)
})
})
</script>
</body>
</html>
|
Nexus,
Я пока плохо разбираюсь, но спасибо. И когда читаю вроде все понятно а когда дело доходит до практики я теряюсь |
рони,
Спасибо ))) |
| Часовой пояс GMT +3, время: 21:23. |