Guardar nuevo valor css por defecto a través de un radiobutton.

cristian_cena · #1 (**permalink**) 02/02/2010, 18:19

Hola, comparto el código de una práctica que vengo realizando.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>experimento</title>
        <style type="text/css">
            body{
                font-family:Arial, Helvetica, sans-serif;
                font-size:16px;
            }
            #content{
                width:150px;
                height:20px;
                background-color:#66FFCC;
                padding:10px;
                text-align:left;
            }
            #escribeDatos{
                display:none;
                };
            #cerrarEscritura{
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <span>experimento</span>
            <span id="masDatos" onclick="
            getElementById('content').style.width='350px';
            getElementById('cerrarEscritura').style.display='inline';
            getElementById('escribeDatos').style.display='inline';
            this.style.display='none';
            
            "
            >[+]</span>
            
            <span id="cerrarEscritura"
            onclick="this.style.display='none';
            getElementById('content').style.width='150px';
            getElementById('masDatos').style.display='inline';
            getElementById('escribeDatos').style.display='none';
            ">[-]</span>
            <span id="escribeDatos">
            <input type="radio" name="opcion" value="valor1"checked>
            <span>valor1</span>    
            <input type="radio" name="opcion" value="valor2">
            <span>valor2</span>    
            <input type="radio" name="opcion" value="valor3">
            <span>valor3</span>    
            </span>
            
        </div>
    </body>
</html>

La idea es que el div #content cambie su background-color (el verde que aparece por defecto) según el radiobutton que escoja el usuario
y que este color quede almacenado (¿en donde?) para que en posteriores entradas el usuario vea el div #content del color que el mismo seleccionó.
¿Esto puede hacerse con javascript?

Expongo desde mi ignorancia lo que deseo hacer:

if (radiobutton == seleccionado){
se asigna nuevo color a #content
}
else {
#content sigue manteniendo el color pordefecto /*el verde nomás*/
}

Pero si se asigna nuevo color a #content, que este se guarde como valor por defecto para futuras visitas del sitio.

Desde ya muchas gracias por sus sugerencias, todo material (links) es bien recibido, no pretendo que me hagan el trabajo sino una simple ayuda para orientarme en el camino que debo emprender, a traves de algun material de estudio o un buen consejo.

Saludos!

zerokilled · #2 (**permalink**) 02/02/2010, 19:41

en javascript, las variables globales tienen un tiempo de vida. estas perduran hasta cuando el navegador descarte el documento. la unica forma que se me ocurre es a traves de cookies. quirksmode tiene un material donde se discuten las cookies, en adicion de varias funciones para manejarlos. basicamente creas la cookie cuando el usuario escoge el color. luego, en cada carga del documento lees la cookies y le asignas el color escogido.

cristian_cena · #3 (**permalink**) 02/02/2010, 22:24

Gracias zerokilled, siempre ofreciendo respuestas de calidad

, empezaré por estudiar el tema.