JavaScript全解析——案例-网页换肤
发布时间:2023-06-02 10:06:00
发布人:zyh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="redBtn">红色</button>
<button id="blueBtn">蓝色</button>
<button id="greenBtn">绿色</button>
<button id="offBtn">取消</button>
<script>
// 获取之前页面保存的值
var color = window.localStorage.getItem('color')
// 首先要判断一下color有没有值 如果有值我们就直接设置
if (color) {
document.body.style.background = color
}
// 首先给页面设置颜色
redBtn.onclick = function () {
// 设置背景颜色
document.body.style.background = 'red'
// 保存颜色的值到浏览器中
window.localStorage.setItem('color', 'red')
}
blueBtn.onclick = function () {
// 设置背景颜色
document.body.style.background = 'blue'
// 保存颜色的值到浏览器中
window.localStorage.setItem('color', 'blue')
}
greenBtn.onclick = function () {
// 设置背景颜色
document.body.style.background = 'green'
// 保存颜色的值到浏览器中
window.localStorage.setItem('color', 'green')
}
offBtn.onclick = function () {
// 设置背景颜色
document.body.style.background = 'none'
// 当我们点击取消的时候要删除掉我们保存的值
window.localStorage.removeItem('color')
}
</script>
</body>
</html>
