Publicidad

martes, 8 de mayo de 2007

Cambiar propiedades Style de un texto con Javascript

"No hay verdad si no hay mentira. No hay muerte si no hay vida. No hay amor sin ningún odio. No hay nada, si no hay todo."
Todo/Nada -Azrael
Copypasteado de Daikrieg


Ejemplos de instrucciones con Javascript para cambiar las propiedades style de un texto.

Ocultar un texto llamando a una id concreta con un botón


Por ejemplo, queremos ocultar el siguiente texto:
Me gustan las tetas gordas y, cuanto más gordas, mejor.


Para ello, lo vamos a escribir dándole la id 'texto' (por ejemplo, con un tag div) y vamos a añadir la siguiente función script (ya sea en el mismo html o desde una hoja .js):
function cambiarpropiedad()
{
/*Utilizamos una función if para que, al volver a clicar el botón, vuelva a verse el texto*/
if (document.getElementById('texto').style.display == 'none')
{
document.getElementById('texto').style.display = 'block';
} else {
document.getElementById('texto').style.display = 'none';
}
}


Luego, añadiríamos un botón que llamase a esta función, quedando el código html algo así:
<div id="texto">Me gustan las tetas gordas y, cuanto más gordas, mejor.</div>
<input type="button" value="Cambia el color del texto superior" onclick="cambiarpropiedad()" />


Ocultar un texto llamando a una id cualquiera con un botón


Sólo habría que cambiar, en la función Javascript, el 'texto' por el nombre de una variable cualquiera (en este caso escogemos var1) y luego añadir el nombre de la variable en la declaración de las funciones.

El código quedaría algo así:
unction cambiarpropiedad(var1)
{
if (document.getElementById(var1).style.display == 'none')
{
document.getElementById(var1).style.display = 'block';
} else {
document.getElementById(var1).style.display = 'none';
}
}

<div id="texto">Me gustan las tetas gordas y, cuanto más gordas, mejor.</div>
<input type="button" value="Cambia el color del texto superior" onclick="cambiarpropiedad('texto')" />
<!-- En este caso, el botón sólo está para la id texto pero la declaración de variable permite reutilizar la función para más botones o textos.-->


Otros cambios de propiedades


Con Javascript podemos modificar cualquier otro tipo de propiedad del tag que sea. Tan sólo hay que modificar de la función document.getElementById(variable).style.display la parte correspondida a .style.display. Por ejemplo, para cambiar el color de fondo, habría que poner: .style.backgroundColor. Si fuese un enlace y quisiésemos cambiar la dirección habríamos de poner .href.

Las posibilidades de modificar el código html con Javascript son, incluso para un iniciado, ilimitadas.

5 comentarios:

A dijo...

Intercambiamos Enlaces?

http://tutorialestodosonline.blogspot.com

Si es de su interes por favor dejar un mensaje en el blog

Saludos

T.O

Anónimo dijo...

http://46thstreetstudio.com/free-hardcore-porn.html free hardcore porno galleries 3d anime porn clips double penetration porn clips

Anónimo dijo...

After getting more than 10000 visitors/day to my website I thought your malditaseados.blogspot.com website also need unstoppable flow of traffic...

Use this BRAND NEW software and get all the traffic for your website you will ever need ...

= = > > http://get-massive-autopilot-traffic.com

In testing phase it generated 867,981 visitors and $540,340.

Then another $86,299.13 in 90 days to be exact. That's $958.88 a
day!!

And all it took was 10 minutes to set up and run.

But how does it work??

You just configure the system, click the mouse button a few
times, activate the software, copy and paste a few links and
you're done!!

Click the link BELOW as you're about to witness a software that
could be a MAJOR turning point to your success.

= = > > http://get-massive-autopilot-traffic.com

Anónimo dijo...

single dating in sachsen http://loveepicentre.com/contact/ christian dating london
russian dating sites rated [url=http://loveepicentre.com/map/]dating sites from eroupe[/url] dating usa teenage
who is dave batista dating [url=http://loveepicentre.com/]great dating quotes[/url] ali dating jared morgenstern [url=http://loveepicentre.com/user/anwar_ijaz/]anwar_ijaz[/url] mature women online dating

Anónimo dijo...

coincidimos en el gusto x las tetas gordas.
un abrazo.
pitercriss-