JavaScript: Algunas cositas

Cambiar estilos con javascript:

En anteriores entradas mostré la forma de mostrar un div y poder cerrarlo [1] [2] [3] [4]

Todas se hacen con cambios de estilos.

Es muy fácil, lo que he hecho es cambiar de display:none a display:block o viceversa.

Esto mismo lo vemos en los efectos que utilizan muchos blog en abrir y cerrar, lo utilizo yo en el mio, en su mayor parte en la sidebar.

De la misma forma podemos hacer cambios de estilos en todo el documento del blog o página.

Todo lo que se define como estilos CSS.

Propiedades de fuente, color y propiedades del fondo, propiedades de posicionamiento, ancho, alto bordes, margenes, etc...

Hay que utilizar un poco la imaginación y saldrán los efectos o cambios necesarios.


A tener en cuenta:

Tendremos que tener en cuenta algunas cosas que JavaScript acepta y las que no, esto causará un error o no se ejecutaran las instrucciones que se deben realizar .

Algunos errores que he notado en las pruebas que he realizado:

Error 1:

Las terminaciones con punto y coma (;).

Ejemplo de error con punto y coma:

Esto no funcionará:

function cerrarbandera(){
document.getElementById("cerrarur");

.style.display="none";

}

Esto si:

function cerrarbandera(){
document.getElementById("cerrarur")

.style.display="none";

}

El error esta en el punto y coma:

("cerrarur");

También podemos hacer que funcione de otras formas como por ejemplo así:

function cerrarbandera(){
div = document.getElementById("cerrarur");

div.style.display="none";

}

Esta función lo único que hace es cerrar el contenido dentro del div "cerrarur".

Y para ejecutarlo hay que llamar a la función llamada cerrarbandera.

Ejemplo con link:

<a href='javascript:cerrarbandera();return false'>CERRAR</a>

O así:

<a href='#' onclick='cerrarbandera();return false'>CERRAR</a>

Se puede utilizar el código llamando a la función o directamente en un link o botón.

Utilizar el código directamente sin ninguna función:

<a href="#" onclick="getElementById('cerrarur').style.display='none';return false">CERRAR</a>

Error 2:

Otro error que he notado y que pasa al integrar el código en la plantilla de blogger y no en una página web (que raro que blogger compliqué las cosas), son con las cadenas de texto que se encierran entre comillas dobles o simples.

Algunas veces tendremos que cambiar las comillas dobles por las simples o por &quot;


¿Para que es el return: false?

Es para evitar que al hacer click al hipervínculo el navegador vaya a la dirección especificada en el href correspondiente.

En los ejemplos es: href="#"

Muchos programadores el lugar de return false colocan en el href javascript:void(0) que da el mismo resultado.

Ejemplo:

<a href="javascript:void(0)" onclick="getElementById('cerrarur').style.display='none'">CERRAR</a>