欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

localStorage改变背景颜色和字体大小

程序员文章站 2022-03-24 09:31:48
...

图片展示如下

localStorage改变背景颜色和字体大小

代码如下

1.Css

  1. <style>
  2. .main{
  3. text-align: center;
  4. margin: 0px auto;
  5. width: 300px;
  6. }
  7. .container {
  8. width: 300px;
  9. height: 300px;
  10. line-height: 300px;
  11. }
  12. </style>

2.js

  1. <div class="main">
  2. <div class="container"> hello</div>
  3. <button id="bg">修改背景颜色</button>
  4. <button id="size">修改字体大小</button>
  5. </div>
  6. <script>
  7. var con=document.querySelector('.main');
  8. var bgColor=localStorage.getItem('bgColor') || '#0ff';
  9. var FSize=localStorage.getItem('FSize') || '35px';
  10. con.style.background = bgColor;
  11. con.style.fontSize = FSize;
  12. document.querySelector('#bg').onclick = function(){
  13. bgColor = prompt('请输入颜色');
  14. localStorage.setItem('bgColor',bgColor);
  15. con.style.background = bgColor;
  16. }
  17. document.querySelector('#size').onclick=function(){
  18. FSize=parseInt(prompt('请输入字体大小'))+'px';
  19. localStorage.setItem('FSize',FSize);
  20. con.style.fontSize=fontSize;
  21. }
  22. </script>