6 - Selección de elementos utilizando las clases CSS definidas.


Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>

<body>
  <input type="button" id="boton1" value="Fuente Pequeña">
  <input type="button" id="boton2" value="Fuente Normal">
  <input type="button" id="boton3" value="Fuente Grande">
  <h1>Titulo Noticia 1</h1>
  <div class="noticia">
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
  </div>
  <h1>Titulo Noticia 2</h1>
  <div class="noticia">
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
  </div>
  <h1>Titulo Noticia 3</h1>
  <div class="noticia">
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
    Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia Noticia
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>
let x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  let x=$("#boton1");
  x.click(fuentePequena);
  x=$("#boton2");
  x.click(fuenteMediana);
  x=$("#boton3");
  x.click(fuenteGrande);
}

function fuentePequena()
{
  let x=$(".noticia");
  x.css("font-size","10px");
}

function fuenteMediana()
{
  let x=$(".noticia");
  x.css("font-size","12px");
}

function fuenteGrande()
{
  let x=$(".noticia");
  x.css("font-size","14px");
}
.noticia{
  font-size:12px;
}

Disponer un título de noticia y seguidamente la descripción de la noticia (encerrarlo en un div con un nombre de clase), repetir esto para tres noticias. Agregar tres botones que rescaten el nombre de la clase para la descripción de la noticia y cambien su tamaño de fuente.


Ver solución

pagina1.html





funciones.js




estilos.css



Retornar