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.