Búsqueda personalizada
 
 
 
 
Métodos addClass y removeClass
 

Los métodos addClass y removeClass nos permiten asociar y desasociar una clase a un elemento o conjunto de elementos HTML.

Problema: 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

<html>  
<head>  
<title>Problema</title>  
<link rel="StyleSheet" href="estilos.css" type="text/css">  
<script type="text/javascript" src="../jquery.js"></script>  
<script type="text/javascript" src="funciones.js"></script>  
</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.</b>  
<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>  
</body>  
</html>  

funciones.js

var x;  
x=$(document);  
x.ready(inicializarEventos);    

function inicializarEventos()  {    
var x=$("#boton1");    
x.click(asociarClase);    
x=$("#boton2");    
x.click(desasociarClase);  }    
function asociarClase()  {    
var x=$("#descripcion");    
x.addClass("recuadro");  }    

function desasociarClase()  {    
var 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;  }  

Tengamos bien en cuenta que en el archivo HTML debemos indicar donde se encuentran los archivos js y css:

<link rel="StyleSheet" href="estilos.css" type="text/css">  
<script type="text/javascript" src="../jquery.js">
</script>  <script type="text/javascript" src="funciones.js"></script>  

Cuando se presiona el botón asociar hoja de estilo se ejecuta la función:

function asociarClase()  {    
var x=$("#descripcion");    
x.addClass("recuadro");  }  

Donde llamamos al método addClass con el nombre de la clase (dicha clase debe estar definida en la hoja de estilo (css). De forma similar para desasociar una clase se ejecuta la función:

function desasociarClase()  {    
 var x=$("#descripcion");    
 x.removeClass("recuadro");  }  

donde llamamos al método removeClass a partir de un objeto jQuery.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion