JMiur [E]

Es bastante común que tratemos de establecer una propiedad CSS, la sintaxis sea correcta y, aún así, no se vea lo que creemos que debería verse.

Una forma de cambiar la apariencia de un elemento dentro de la página es modificar sus propiedades dinámicamente (on-fly) utilizando diferentes métodos pero, dependiendo de dónde y cómo lo hacemos, el resultado variará o será nulo.

Un efecto muy común es el llamado rollover. El concepto de la técnica es simple: dado un elemento, establecemos sus propiedades, cuando el puntero del ratón pasa por encima las propiedades cambian y cuando salen del elemento, vuelven a su estado original.

Por ejemplo, en la sección estilo de esta plantilla hay definidas dos clases:

P class="RecFinito" creará un bloque de texto con este recuadro

P class="boxcontenido" creará un bloque de texto con este otro

En forma dinámica podría cambiarse la clase utilizada:
<p class="boxcontenido"
onmouseover="this.className='RecFinito';"
onmouseout="this.className='boxcontenido';">
....... texto .......
</p>

CAMBIA DE CLASE CUANDO EL MOUSE ESTÁ ENCIMA

El cambio de tamaño obliga al navegador a "reescribir" la página, haciendo espacio para el elemento.

También podríamos cambiar sólo una propiedad de la clase:
<p class="boxcontenido"
onmouseover="this.style.backgroundColor='#021EA2';"
onmouseout="this.style.backgroundColor='#000000';">
....... texto .......
</p>

CAMBIA UNA PROPIEDAD CUANDO EL MOUSE ESTÁ ENCIMA

O podría agregarse un atributo STYLE para que sobrescriba el estilo de la clase:
<p class="boxcontenido"
style="font-size:14px;color:green;">
....... texto .......
</p>

UNA CLASE + UN ESTILO

En resumen, para cambiar el estilo de cualquier elemento de la página, se puede utilizar cualquier rutina interceptora de eventos, y establecer la nueva propiedad en forma directa dentro del mismo objeto mediante:
this.className = 'CLASE_NOMBRE'
this.style.PROPIEDAD = 'valor'
Como los elementos de estilo pueden ser definidos de varias maneras, esto puede provocar conflictos y hay un orden de prioridades predefinido:

1° - los elementos definido por un script (onmouseover = "this.style.propiedad = valor)
2° - las definiciones del atributo STYLE (<div style="definiciones">)
3° - las definiciones mediante CLASS (<div class=nombre>)

Sin comentarios

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR