网页开关灯效果实现
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>网页开关</title>
<style type="text/css">
.cls {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<input type="button" id="btn" value="网页开关" />
<script type="text/javascript">
function $(id) {
//封装id选择器的获取
return typeof id === 'string' ? document.getElementById(id) : id;
}
var btn = document.getElementById("btn");
btn.onclick = function() {
document.body.className = document.body.className != "cls" ? "cls" : "";
}
</script>
</body>
</html>
预览效果
image.png
网友评论