Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
修改背景颜色和字号 并存入localstroage, 打开页面首先读取localstroage保存的数据,如果没有就读默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.word {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="word">hello world</div>
<button id="bg">修改背景颜色</button>
<button id="size">修改字号</button>
</div>
<script>
var wordObj = document.querySelector('.word')
var bgColor = localStorage.getItem('bgColor') || '#fe3212';
var fontSize = localStorage.getItem('fontSize') || '20px';
wordObj.style.background = bgColor;
wordObj.style.fontSize = fontSize;
document.querySelector('#bg').onclick = function () {
bgColor = prompt('请输入要修改的颜色');
localStorage.setItem('bgColor', bgColor);
wordObj.style.background = bgColor;
}
document.querySelector('#size').onclick = function () {
fontSize = parseInt(prompt('请输入要修改的字体大小')) + 'px';
localStorage.setItem('fontSize', fontSize);
wordObj.style.fontSize = fontSize;
}
</script>
</body>
</html>