localStorage改变背景颜色和字体大小
程序员文章站
2022-03-24 09:31:48
...
图片展示如下
代码如下
1.Css
<style>
.main{
text-align: center;
margin: 0px auto;
width: 300px;
}
.container {
width: 300px;
height: 300px;
line-height: 300px;
}
</style>
2.js
<div class="main">
<div class="container"> hello</div>
<button id="bg">修改背景颜色</button>
<button id="size">修改字体大小</button>
</div>
<script>
var con=document.querySelector('.main');
var bgColor=localStorage.getItem('bgColor') || '#0ff';
var FSize=localStorage.getItem('FSize') || '35px';
con.style.background = bgColor;
con.style.fontSize = FSize;
document.querySelector('#bg').onclick = function(){
bgColor = prompt('请输入颜色');
localStorage.setItem('bgColor',bgColor);
con.style.background = bgColor;
}
document.querySelector('#size').onclick=function(){
FSize=parseInt(prompt('请输入字体大小'))+'px';
localStorage.setItem('FSize',FSize);
con.style.fontSize=fontSize;
}
</script>
上一篇: php如何去掉数组中的重复的元素
下一篇: 阿里云短信服务的详解