<div id="body">
<div class="kaiguan" >
<div class="bai" id="anniu"></div>
</div>
</div>
mounted() {
var anniu = document.getElementById('anniu');
var kaiguan = document.querySelector('.kaiguan');
var body = document.getElementById('body');
var temp = 1;
anniu.addEventListener('click', function () {
if (temp == 1) {
anniu.className = 'hei';
temp = 0;
kaiguan.style.border = '2px solid rgb(11, 243, 81)';
body.style.backgroundColor = '#000';
body.style.color = 'white';
} else {
anniu.className = 'bai';
temp = 1;
kaiguan.style.border = '2px solid black';
body.style.backgroundColor = '#fff';
body.style.color = 'black';
}
})
}
}
css部分
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#body {
height: 100vh;
transition: all 1s;
}
.kaiguan {
position: absolute;
top: 20px;
right: 50px;
width: 40px;
height: 20px;
border: 2px solid black;
border-radius: 20px;
cursor: pointer;
transition: all 3s;
}
.bai {
position: absolute;
top: 1.5px;
left: 2px;
height: 13px;
width: 13px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
transition: all 1s;
}
.hei {
position: absolute;
top: 1.5px;
right: 2px;
height: 13px;
width: 13px;
background-color: rgb(11, 243, 81);
border-radius: 50%;
transition: all 1s;
}
学习记录~