Modificar Estilos

[juanca2626]

Hola buenas, regresando despues de tiempo. tengo un problema al querer modificar un estilo. bueno en si el problema no es ese. les explico lo que deseo hacer.

tengo una definicion de estilo asi.

<div id="estilo1">

<style type="text/css">
#af-form #af-header{
font-family: Verdana, serif;
font-size: 12px;
font-weight: normal;
}
</style>

</div>

<div id ="af-form">
<div id ="af-header">Cabecera</div>
</div>

y asi le podemos definir todas las partes de un formulario.

lo que quiero hacer es poder modificar ese estilo. mediante controles por ejemplo. puedo crear un combo. para modificar los font-family , y cuando selecciono un estilo de texto que me modifique el font-family, del estilo que he definido. ya eso logre hacerlo con $.cssRule, e incluso veo en firefox como cambia el valor de font-family en tiempo de ejecucion. el problema esta que yo una vez logre el aspecto deseado. lo que quiero es guardar todo el estilo que he modificado en #af-form #af-header. pero al parecer este sigue con su valor de siempre, no se como hacerle para modificar fisicamente los valores de de ese estilo para yo despues guardarlo.
alguno me dira que porque no los metes a una variables y guardas eso. pero hay que recordar que ese estilo sera enorme y guardarlo en variables me seria muy trabajoso. la cosa seria ir modificando cada atributo cosa que despues guardo todo.

no se si me explico. alguien hizo algo parecido a esto. el fin del proyecto es crear formularios con estilos pesonalizados. se pueda modificar desde colores letras fondos.

Saludos.

[hermanosvalor]

Las unicas soluciones son las siguientes:
- Guardado permanente:
- post de todos los css a php que lo guarda en mysql; y carga desde mysql sobre el css
- idemo pero en vez de mysql escribiendo en ficheros
- Guardado temporal:
- En variables php de session
- En cookies javascript
- En cookies php

Saludos.

[InKarC]

Iniciado por hermanosvalor

Las unicas soluciones son las siguientes:
- Guardado permanente:
- post de todos los css a php que lo guarda en mysql; y carga desde mysql sobre el css
- idemo pero en vez de mysql escribiendo en ficheros
- Guardado temporal:
- En variables php de session
- En cookies javascript
- En cookies php

Saludos.

Creo que no entendió el problema del posteador original...

La mejor opción es simplemente poner en un "<style>" la muestra y poner las reglas CSS en un array (que luego se envia)

Código Javascript:

var opciones = [];
    $("#color_bg a").click(function(){
        opciones[0] = "background: " + this.rel;
        actualizar();
    })
    
    $("#color_txt a").click(function(){
        opciones[1] = "color: " + this.rel;
        actualizar();
    })
    
    function actualizar(){
        $("head").append("<style>#muestra { " + opciones.join(";") + " } </style>")
    }
 
    $("#guardar").click(function(){
        $("#reglas_css").val(opciones.join(";"));
        alert("Las reglas CSS: \n" + opciones.join(";") + "\nse han guardado" )
        return false;
    })
 

Lo pueden ver funcionando aqui http://jsfiddle.net/8wsmY/1/

[juanca2626]

gracias InKarC y hermanosvalor.

si Inkarc ya tenia pensando eso, es la uninca manera, pero son muchos los bloques y estilos definidos.

e intentado usar document.styleSheets. pero el p...t...o.. IE lo interpreta de manera diferente.

por ejemplo tengo definiciones de estilos de esta manera.

#af-form .af-body label.previewLabel, #af-form .af-body label.lastNamePreviewLabel{
font-family: Verdana, serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}


y asi de un monton, y tengo que respetar esa extructura por ejemplo si quiero modificar el font-size por 16px; la estructura del estilo me debe de quedar asi


#af-form .af-body label.previewLabel, #af-form .af-body label.lastNamePreviewLabel{
font-family: Verdana, serif;
font-size: 16px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

ya en firefox habia encontrado una manera.

var mysheet=document.styleSheets[0,1,2]

y haci ir recorriendo todas su extructura, puedo armar de nuevo todo lo de arriba y sobre escribir el estilo con los cambios nuevos, y asi se refleje en la pantalla y al vez lo tengo bien definido fisicamente el estilo y al final lo puedo guardar donde sea db, txt. etc.
Pero este no funciona en IE 8 para abajo. dicen que en el 9 si funciona, pero no se si lo interpretara igual.

porque el .selectorText , en firefox por ejemplo si digo que me muestre en un aler todos los nodos me sacaria un solo mensaje , " #af-form .af-body label.previewLabel, #af-form .af-body label.lastNamePreviewLabel ", lo cual me parece correcto.

pero en IE, esto me saca 2 mensajes primero me saca "#af-form .af-body label.previewLabel" y despues "#af-form .af-body label.lastNamePreviewLabel "
entonces ya todo esto no deja avanzar.

y aparte hay una opcion que necesitaria usar que es cssText, y este solo funciona en ff en IE no funciona .

haber que mas se me puede ocurrir, pero la idea es esta, en que se tiene que volver a crear esa definicion de estilo. tengo una idea en mente. pero necesitaria saber como puedo obtener todos los estilos que tiene definido. por ejemplo


$("#af-form .af-body label.previewLabel , #af-form .af-body label.lastNamePreviewLabel").css()

este .css sabe que hay dentro del objeto. pero no hay manera de decirle, que te devuelva todo lo que tiene dentro.

[InKarC]

Creo que no comprende como funciona los estilos CSS; me explico.

Si primero define esto

Código CSS:

#af-form .af-body label.previewLabel, #af-form .af-body label.lastNamePreviewLabel{
font-family: Verdana, serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
 

y luego define esto

Código CSS:

#af-form .af-body label.previewLabel, #af-form .af-body label.lastNamePreviewLabel{
font-size: 16px;
}
 

Es exactamente lo mismo a haber definido desde el principio esto:

Código CSS:

#af-form .af-body label.previewLabel, #af-form .af-body label.lastNamePreviewLabel{
font-family: Verdana, serif;
font-size: 16px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
 

Y si puede ver mi ejemplo el deja vacíos los campos que no se utilizaron (por ejemplo si no se elige color de letra); o sea que cuando los coloque juntos (el css base y el generado) y coloque de ultimo el generado por el usuario, van a quedar con la misma funcionalidad de esa "estructura".