select4.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Select 4</title>
  5. function iniciar() {
  6. const select = document.querySelector('#tipoletra');
  7. const parrafo = document.querySelector('#chiquito');
  8. const valor = localStorage.getItem('fuente');
  9. select.value = valor;
  10. parrafo.style.fontFamily = valor;
  11. }
  12. function cambiarFuente(select) {
  13. const parrafo = document.querySelector('#chiquito');
  14. parrafo.style.fontFamily = select.value;
  15. localStorage.setItem('fuente', select.value);
  16. }
  17. </script>
  18. #chiquito {
  19. font-size:48pt;
  20. }
  21. </style>
  22. </head>
  23. <body onload="iniciar()">
  24. <h1>Select 4</h1>
  25. <p>
  26. <label>Tipo de letra:</label>
  27. <select id="tipoletra" onchange="cambiarFuente(this)">
  28. <optgroup label="Estándar">
  29. <option value="sans-serif">Sin remate</option>
  30. <option value="serif">Con remate</option>
  31. <option value="monospace">Monoespaciada</option>
  32. <optgroup label="Especial">
  33. <option value="Algerian">Fantasía</option>
  34. <option value="Arial Black">Gruesa</option>
  35. <option value="Forte">Pinceladas</option>
  36. <option value="Playbill">Western</option>
  37. <option value="Stencil,Impact">Guerra</option>
  38. </select>
  39. </p>
  40. <p id="chiquito">
  41. Lorem fistrum no te digo trigo por no llamarte Rodrigor
  42. a gramenawer caballo blanco caballo negroorl la caidita
  43. va usté muy cargadoo hasta luego Lucas pupita está la cosa
  44. muy malar a peich diodenoo. Diodeno te voy a borrar el cerito
  45. no te digo trigo por no llamarte Rodrigor me cago en tus muelas.
  46. Condemor a wan la caidita por la gloria de mi madre quietooor
  47. te va a hasé pupitaa. Ese pedazo de de la pradera pupita va
  48. usté muy cargadoo la caidita torpedo no puedor a gramenawer.
  49. Torpedo te voy a borrar el cerito pupita la caidita ese pedazo
  50. de por la gloria de mi madre ese que llega va usté muy cargadoo
  51. está la cosa muy malar te va a hasé pupitaa hasta luego Lucas.
  52. </p>
  53. </body>
  54. </html>

Proinf.net