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

保留用户自定义设置

程序员文章站 2022-03-24 09:38:13
...

保留用户自定义设置

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>用户设置</title>
    6. 

  6. </head>
    7. 

  7. <style>
    8. 

  8.     h1{
    9. 

  9.         font-size: 16px;
    10. 

  10.         color: black;
    11. 

  11.     }
    12. 

  12. </style>
    13. 

  13. <body>
    14. 

  14.     <input type="text" placeholder="请输入文字颜色" id="color">
    15. 

  15.     <button onclick="setColor()">设置文字颜色</button>
    16. 

  16.     <input type="text" placeholder="请输入文字大小" id="fontSize">
    17. 

  17.     <button onclick="setFontSize()" id="size">设置字体大小</button>
    18. 

  18.     <h1 id="h1">我是用户自定义的样式</h1>
    19. 

    20. 

    21. 

  21. </body>
    22. 

  22. <script>
    23. 

    24. 

  24.     var h1 = document.getElementById('h1');
    25. 

  25.     function setColor() {
    26. 

  26.         var color = document.getElementById('color').value
    27. 

  27.         if (color){
    28. 

  28.             localStorage.setItem('color',color);
    29. 

  29.             h1.style.color = color;
    30. 

    31. 

  31.         }else {
    32. 

  32.             alert('请输入您要设置的值')
    33. 

  33.         }
    34. 

  34.     }
    35. 

  35.     function setFontSize() {
    36. 

  36.         var fontSize = document.getElementById('fontSize').value
    37. 

  37.         if (fontSize){
    38. 

  38.             localStorage.setItem('fontSize',fontSize);
    39. 

  39.             h1.style.fontSize = fontSize;
    40. 

    41. 

  41.         }else {
    42. 

  42.             alert('请输入您要设置的值')
    43. 

  43.         }
    44. 

  44.     }
    45. 

  45.     onload= function () {
    46. 

  46.         var color = localStorage.getItem('color');
    47. 

  47.         var fontSize = localStorage.getItem('fontSize');
    48. 

  48.         h1.style.fontSize = fontSize;
    49. 

  49.         h1.style.color = color;
    50. 

  50.     }
    51. 

  51. </script>
    52. 

  52. </html>
    53.

上一篇： TS和JS混装导出导入MVC里的model模块的写法

下一篇： 基本布局和块状元素

推荐阅读