Mostrando entradas con la etiqueta quitar clases. Mostrar todas las entradas
Mostrando entradas con la etiqueta quitar clases. Mostrar todas las entradas

miércoles, 24 de julio de 2013

Agregar y eliminar clases en jQuery. – Miami – Abogado – Law Firm



Para agregar y eliminar clases enjQuery haremos uso de las funciones.addClass() y.removeClass(), su sintaxis sería de la siguiente manera:

$('elementohtml').addClass('NombreDeClase');
$('elementohtml').removeClass('NombreDeClase');
$('') convierte nuestro elemento html en un objetojQuery y las funciones.addClass() y.removeClass() agregan a éste elemento html la clase la cual coloquemos como parámetro o argumento.

Un ejemplo de como agregar una clase por ejemplo a un párrafo para cambiar su color de fuente sería:

$(document).ready(function(){
$('p').addClass('azul');
});

Ésto suponiendo que tenemos en nuestrocss una clase llamada.azul:

.azul { 
color: #0938F0;
}

Y si queremos cambiar la clase del párrafo al hacer clic en un botón haríamos lo siguiente:

-Para agregar el botón usaremos la etiqueta de htmlbutton , su sintaxis sería:

button type="button"Texto del boton/button

-Y nuestro botón sería:

button type="button"Agregar Clase/button

Nuestro código jQuery para cambiar la clase del párrafo haciendo clic en el botón "Agregar Clase" sería:

$(document).ready(function(){
$('button').click(function(){
$('p').addClass('azul');
});
});

Y para quitar una clase haciendo clic en un botón:

$(document).ready(function(){
$('button').click(function(){
$('p').removeClass('azul');
});
});

En el siguiente ejemplo agregamos una clase a un texto en undiv y lo transformamos en un cuadrado, y a un rectángulo le quitamos su clase y lo convertimos en un simple texto:

!DOCTYPE html
html
head
style
h2 {
font-family:arial;
}
.rectangulo{
display: inline-block;
height:150px;
width:400px;
background-color:#BB17ED;
font-family:arial;
color:#ffffff;
border-radius: 8px;
text-align:center;
margin-top:5px;
}
.azul{
display: inline-block;
height:200px;
width:200px;
background-color:#0938F0;
font-family:arial;
color:#ffffff;
border-radius: 8px;
text-align:center;
margin-top:5px;
}
/style
titleAgregar y eliminar clases jQuery/title
script src="http://code.jquery.com/jquery-1.9.1.js"/script
/head
body
h2Haz clic en los botones para eliminar y agregar las clases/h2
button id="uno" type="button"Agregar Clase/button
button id="dos" type="button"Quitar Clase/button
/br
div id="cuadrado"Soy un cuadro/div
div Class="rectangulo"Soy un rectangulo/div
script
$(document).ready(function(){
$('#uno').click(function(){
$('#cuadrado').addClass('azul');
});
$('#dos').click(function(){
$('.rectangulo').removeClass('rectangulo');
});
});
/script
/body
/html

Vamos a verlo en acción: