Como crear una clase de estilos con jQuery?

shujidan · #1 (**permalink**) 07/05/2012, 22:39

Hola

, otra duda.

Se puede crear una Clase como en la hoja de estilos o se puede modificar la hoja de estilos con jquery?

Por ejemplo yo tengo un plugin con el cual vienen varios themes para cambiar el look and feel de los widgets pero para poder usar el estado :active es mucho mas facil agregar o quitar la propiedad class que modificar cada propiedad manualmente con el metodo css() para cambiar el look n feel y luego todo de nuevo para devolverlo a su estado original.

El usuario está obligado a implementar esta en la hoja de estilos?
En pocas palabras, es posible crear una clase con jquery para luego asignarsela a una etiqueta? Seria muy funcional algo asi, que se pudiera crear dinamicamente sin tener que recurrir al css.

emprear · #2 (**permalink**) 07/05/2012, 23:03

De la misma manera que en javascript podés cambiar propiedades con
objeto.style.propiedad, cuyo equivalente en jQuery es css(), también tenés la posibilidad de cambiar una clase en su conjunto con className, cuyo equivalente en jQuery son los métodos
removeClass() y addClass()
Espero sea eso lo que querés saber
Saludos

shujidan · #3 (**permalink**) 07/05/2012, 23:20

No, el punto es evitar tener que modificar los estilos de esa forma, hace mas pesado el programa y no se puede manipular tan facilmente como lo permiten las clases.
Por ejemplo en lugar de tener que modificar todas las propiedades cada vez a una etiqueta seria mas funcional solo asignarle o quitarle una clase.
La pregunta es si se puede crear o modificar la clase con jquery de forma que no sea necesario para el usuario del plugin crear el estilo manualmente en la hoja de estilos.

emprear · #4 (**permalink**) 07/05/2012, 23:35

y que es lo que te estoy diciendo ?
removeClass() y addClass()

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
<style type="text/css">
/*<![CDATA[*/
 
.sobre{
background-color: lime;
width: 200px;
height: 300px;
}
.negro{
background-color: #000;
color: #FFF;
width: 200px;
height: 200px;
border: none;
}
/*]]>*/
</style>
</head>
<body>
<div id="menu">
<button class="sobre">enviar</button>
</div>
 
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
    $("button").mouseover(function() {
        $(this).addClass("sobre").removeClass("negro");
    });
    $("button").mouseleave(function() {
        $(this).removeClass("sobre").addClass("negro");
    });
 
});
//]]>
</script>
</body>
</html>

consultá la documentación al menos

shujidan · #5 (**permalink**) 07/05/2012, 23:41

Cita:

Iniciado por shujidan

La pregunta es si se puede crear o modificar la clase con jquery de forma que no sea necesario para el usuario del plugin crear el estilo manualmente en la hoja de estilos.

la necesidad de crear el estilo dinamicamente es para poder incluir el estilo dentro del archivo .js pero siendo este una clase para su facil manipulacion, no en la hoja de estilos ni fuera del plugin.

IXtremeLT · #6 (**permalink**) 07/05/2012, 23:51

Puedes hacer algo como esto:

Código Javascript:

Ver originalfunction cambiar(){
    $("foo").toggleClass(".bar");
}

Con esto conseguiras agregar o quitar automaticamente la clase .bar a los elementos tipo foo.
Haber si eso es lo que dices, saludos.

shujidan · #7 (**permalink**) 07/05/2012, 23:59

Muchas gracias por responder al tema @IXtremeLT.
La manipulacion de la clase es lo de menos, pues es muy facil con jquery. El problema mas bien seria al establecer las propiedades de la Clase sin tener que recurrir a la hoja de estilos (me refiero a crearla en el contexto de jquery) pero sin perder la utilidad de estos metodos addClass, removeClass y toggleClass como es el que mencionas.

IXtremeLT · #8 (**permalink**) 08/05/2012, 00:13

Si lo que quieres es conocer que propiedades tiene una clase, no se puede saber por medio nativo de javascript.

Pero para modicar las propiedades de un elemeto con alguna clase simplemente haces asi:

Código Javascript:

Ver original$(".my-class").css({
    propiedad1: valor;
    propiedad2: valor;
    etcetc:      : valor;
});

Saludos.