Blogger Information
Blog 16
fans 0
comment 0
visits 9642
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
保留用户自定义设置
坨坨
Original
375 people have browsed it

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>用户设置</title>
  6. </head>
  7. <style>
  8. h1{
  9. font-size: 16px;
  10. color: black;
  11. }
  12. </style>
  13. <body>
  14. <input type="text" placeholder="请输入文字颜色" id="color">
  15. <button onclick="setColor()">设置文字颜色</button>
  16. <input type="text" placeholder="请输入文字大小" id="fontSize">
  17. <button onclick="setFontSize()" id="size">设置字体大小</button>
  18. <h1 id="h1">我是用户自定义的样式</h1>
  19. </body>
  20. <script>
  21. var h1 = document.getElementById('h1');
  22. function setColor() {
  23. var color = document.getElementById('color').value
  24. if (color){
  25. localStorage.setItem('color',color);
  26. h1.style.color = color;
  27. }else {
  28. alert('请输入您要设置的值')
  29. }
  30. }
  31. function setFontSize() {
  32. var fontSize = document.getElementById('fontSize').value
  33. if (fontSize){
  34. localStorage.setItem('fontSize',fontSize);
  35. h1.style.fontSize = fontSize;
  36. }else {
  37. alert('请输入您要设置的值')
  38. }
  39. }
  40. onload= function () {
  41. var color = localStorage.getItem('color');
  42. var fontSize = localStorage.getItem('fontSize');
  43. h1.style.fontSize = fontSize;
  44. h1.style.color = color;
  45. }
  46. </script>
  47. </html>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post