casilla.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Casilla</title>
  5. function cambiar(input) {
  6. const parrafo = document.querySelector('#chiquito');
  7. switch (input.id) {
  8. case 'negrita':
  9. if (input.checked) {
  10. parrafo.style.fontWeight = 'bold';
  11. } else {
  12. parrafo.style.fontWeight = 'normal';
  13. }
  14. break;
  15. case 'cursiva':
  16. if (input.checked) {
  17. parrafo.style.fontStyle = 'italic';
  18. } else {
  19. parrafo.style.fontStyle = 'normal';
  20. }
  21. break;
  22. case 'subrayado':
  23. if (input.checked) {
  24. parrafo.style.textDecoration = 'underline';
  25. } else {
  26. parrafo.style.textDecoration = '';
  27. }
  28. break;
  29. case 'mayusculas':
  30. if (input.checked) {
  31. parrafo.style.textTransform = 'uppercase';
  32. } else {
  33. parrafo.style.textTransform = '';
  34. }
  35. break;
  36. }
  37. }
  38. </script>
  39. </head>
  40. <h1>Casilla de verificación</h1>
  41. <p>
  42. <input type="checkbox"
  43. id="negrita"
  44. onchange="cambiar(this)">Negrita
  45. </label>
  46. <input type="checkbox"
  47. id="cursiva"
  48. onchange="cambiar(this)">Cursiva
  49. </label>
  50. <input type="checkbox"
  51. id="subrayado"
  52. onchange="cambiar(this)">Subrayado
  53. </label>
  54. <input type="checkbox"
  55. id="mayusculas"
  56. onchange="cambiar(this)">Mayúsculas
  57. </label>
  58. </p>
  59. <p id="chiquito">
  60. Lorem fistrum no te digo trigo por no llamarte Rodrigor ahorarr qué dise usteer a wan al ataquerl la caidita. Ahorarr va usté muy cargadoo a wan te voy a borrar el cerito te va a hasé pupitaa pecador fistro mamaar a wan la caidita. No puedor qué dise usteer diodenoo a peich. Mamaar ahorarr ese pedazo de por la gloria de mi madre. A wan te voy a borrar el cerito qué dise usteer condemor te voy a borrar el cerito caballo blanco caballo negroorl no puedor hasta luego Lucas condemor.
  61. </p>
  62. </body>
  63. </html>

Proinf.net