JS Y EJEMPLOS CLASES

EJEMPLOS

A continuación encontraras la modificacion de clases utilizando JavaScript.

ACTIVIDADES A REALIZAR

Objetivo: Analiza y añade botones que añadir clases que apliquen los estilos H1,H2,H3,H4,H5 y H6

Consideraciones:

  • Investiga que cuales son los tamaños de los estilos H1 a H6 y como definirlos en un estilo CSS.
  • El código debe estar extensamente documentado y seguir buenas prácticas de programación.
  • El código debe ser legible y fácil de entender
  • El código debe estar divido en secciones.

EJEMPLOS CON CLASES 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">      
  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" >  
  <style>
    .tamanoTexto { font-size: 24px;}        
    .negrita {font-weight: bold;}        
    .italica {font-style: italic;}        
    .subrayado {text-decoration: underline;}        
    .claro {color: #000; /* Texto negro */background-color: #FFF; /* Fondo blanco */}        
    .oscuro {color: #FFF; /* Texto blanco */ background-color: #000; /* Fondo negro */}
  </style>   
</head>
  <body style="color:white;background-color:black">

  <!-- ******************************************************************** -->
  <!-- SECCION DEL CUERPO HTML -->
  <center>
    <h2>Ejemplos  con clases </h2>
    <br>   
    <span id="campoTexto" class="claro tamanoTexto">Hola Mundo</span>
  </center>
    
  <button id="aplicarNegrita">Aplicar Negrita</button>
  <button id="aplicarItalica">Aplicar Itálica</button>
  <button id="aplicarSubrayado">Aplicar Subrayado</button>
  <br>
  <button id="retirarEstilos">Quitar clases</button>
  <br>
  <button id="cambiarTema">Alternar clase claro/oscuro</button>
  
  <script>

    //********************************************************************
    //SECCION PARA VARIABLES Y CONSTANTES EXTERNAS / GLOBALES
    

    //********************************************************************
    //SECCION PARA INICIAR JAVASCRIPT CUANDO 
    //LA PAGINA ESTE COMPLETAMENTE CARGADA 
    document.addEventListener('DOMContentLoaded', () => 
    { console.log("Pagina cargada y lista");
      // Funcion que agrupara todos los eventos
      escucharElementos();  
      // Otras funciones que se invocaran cuando
      //este lista la pagina.
    });
    //********************************************************************
    //SECCION PARA AÑADIR TODOS LOS INTERCEPTORES
    //DE EVENTOS 
    function  escucharElementos()
    {
      document.getElementById('aplicarNegrita').addEventListener('click', (evento) => 
      { document.getElementById("campoTexto").classList.add("negrita"); });

      document.getElementById('aplicarItalica').addEventListener('click', (evento) => 
      { document.getElementById("campoTexto").classList.add("italica"); });

      document.getElementById('aplicarSubrayado').addEventListener('click', (evento) => 
      { document.getElementById("campoTexto").classList.add("subrayado"); });

      document.getElementById('retirarEstilos').addEventListener('click', (evento) => 
      { document.getElementById("campoTexto").classList.remove("negrita", "italica", "subrayado"); });

      document.getElementById('cambiarTema').addEventListener('click', (evento) => 
      { 
        document.getElementById("campoTexto").classList.toggle("claro");
        document.getElementById("campoTexto").classList.toggle("oscuro");
      });
    }  



    //********************************************************************
    //SECCION DE FUNCIONES QUE SE USARAN POR LA PAGINA
    //********************************************************************



    //********************************************************************
    //FIN DEL SCRIPT
  </script>
  </body>
</html>