CSS Dinamico

October 4th, 2005 | by |

La combinación del uso de Javascript y CSS nos brinda innumerables posibilidades. Podemos convertir la hoja de estilo en un elemento dinámico, permitiendo a los usuarios manejar ciertos aspectos de la presentación de nuestra pagina.

A continuación un ejemplo sencillo para introducirnos en el tema: Tamaño de texto

Como primer paso definimos nuestro estilo y el texto dentro del HTML:


<style type="text/css">
.clase{
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
</style>

<p id="txt" class="clase">
El MMUG CBA nació con el claro objetivo de elevar el nivel de los profesionales multimedia, creando una comunidad de interesados en el desarrollo multimedia para facilitar el trabajo de sus miembros.
</p>

Se destaca la utilización del tag ID para identificar al texto dentro del Documento

Creamos la función Javascript:


<script language="javascript">
var num=10;
function mas(id,accion){
if(accion=='menos'){
num=num-5;
}else{
num=num+5;
}
var size="""+num+"px"";
document.getElementById(id).style.fontSize = eval(size);
}
</script>

“var num=10;” valor inicial de la propiedad font-size de la clase “.clase”

Con nuestro HTML y Javascript listos solo resta ejecutar la función y ver los resultados.

<a href="javascript:mas('txt','mas')" class="clase">Agrandar Texto</a>
<a href="javascript:mas('txt','menos')" class="clase">Achicar Texto</a>

Ejemplo en línea

Archivos del Ejemplo

Más Información

  1. One Response to “CSS Dinamico”

  2. By Pablo Quinterios on Nov 3, 2005 | Reply

    Muy buen post Carlos, muy útil. Les paso por las dudas un cambio para tener un pope para agrandar y achicar el texto.


    <script language="javascript">
    var num=10
    function mas(id,accion){
    if(accion==’menos’){

    if(num > 10){
    num=num-5;
    }

    }else{

    if(num < 20){
    num=num+5;
    }
    }
    var size="\""+num+"px\"";

    document.getElementById(id).style.fontSize = eval(size);
    }
    </script>

Post a Comment