dataset.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Dataset</title>
  5. .resaltado { background-color:yellow; }
  6. </style>
  7.  
  8. /*
  9. El atributo puede ser 'anim' o 'bn'
  10. */
  11. function resaltar(atributo) {
  12. const pelis = document.querySelectorAll('#pelis li');
  13. for (const li of pelis) {
  14. li.className = "";
  15. if (atributo == 'anim') {
  16. if (li.dataset.anim == "S") {
  17. li.className = "resaltado";
  18. }
  19. } else if (atributo == 'bn') {
  20. if (li.dataset.bn == "S") {
  21. li.className = "resaltado";
  22. }
  23. }
  24. }
  25. }
  26.  
  27. function generizar(genero) {
  28. const pelis = document.querySelectorAll('#pelis li');
  29. for (const li of pelis) {
  30. li.className = "";
  31. const arrayGeneros = li.dataset.gen.split(' ');
  32. if (arrayGeneros.includes(genero)) {
  33. li.className = "resaltado";
  34. }
  35. }
  36. }
  37.  
  38. </script>
  39. </head>
  40. <h1>Dataset</h1>
  41. <ul id="pelis">
  42. <li data-anim="S" data-gen="familiar muerte">Coco</li>
  43. <li data-anim="S" data-gen="cuento ogro">Shrek</li>
  44. <li data-bn="S" data-gen="stopmotion">King Kong</li>
  45. <li data-anim="S" data-gen="lampara genio">Aladdin</li>
  46. <li data-gen="playa muerte">Tiburón</li>
  47. <li data-gen="arena gusano">Dune</li>
  48. <li data-bn="S" data-gen="vampiro">Nosferatu</li>
  49. <li data-bn="S" data-gen="stopmotion">Godzilla</li>
  50. <li data-anim="S" data-gen="robot">Mazinger</li>
  51. <li data-anim="S" data-gen="robot">Evangelion</li>
  52. </ul>
  53. <h2>Resaltar</h2>
  54. <p>
  55. <button onclick="resaltar('anim')">Animación</button>
  56. <button onclick="resaltar('bn')">Blanco y negro</button>
  57. </p>
  58. <p>
  59. Género:
  60. <button onclick="generizar('stopmotion')">stopmotion</button>
  61. <button onclick="generizar('robot')">robot</button>
  62. <button onclick="generizar('muerte')">muerte</button>
  63. </p>
  64. </body>
  65. </html>

Proinf.net