9 - Métodos addClass y removeClass.
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.
)
Disponer un div con un conjunto de párrafos. Cuando se presione un botón asociarle una clase y cuando se presione otro desasociarlo de dicha clase.
pagina1.html
<!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="Asociar clase"> <input type="button" id="boton2" value="Desasociar clase"> <div id="descripcion"> <p>HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.</p> <p>Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.</p> <p>Para poder crear una página HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento está utilizando (recuerde que usted está viendo en este preciso momento una página HTML con su navegador).</p> <p>Lo más importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.</p> <p>Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabajó con el mismo. No pretende mostrar todas los elementos HTML en forma alfabética.</p> <p>Como veremos, de cada concepto se presenta una parte teórica, en la que se da una explicación completa, luego se pasa a la sección del ejercicio resuelto donde podemos ver el contenido de la página HTML y cómo la visualiza el navegador. Por último y tal vez la sección más importante de este tutorial es donde se propone que usted haga páginas en forma autónoma (donde realmente podrá darse cuenta si el concepto quedó firme). </p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="funciones.js"></script> </body> </html>
funciones.js
let x = $(document); x.ready(inicializarEventos); function inicializarEventos() { let x = $("#boton1"); x.click(asociarClase); x = $("#boton2"); x.click(desasociarClase); } function asociarClase() { let x = $("#descripcion"); x.addClass("recuadro"); } function desasociarClase() { let x = $("#descripcion"); x.removeClass("recuadro"); }
estilos.css
.recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px; border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px; border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00; }
Retornar