Cambiando propiedades con JavaScript

En JavaScript, una variable es un "cajoncito" donde guardamos algo y al que le damos un nombre para saber cuál es cual ¿Qué podemos guardar?, casi cualquier cosa; así, yo puedo decir que:

var midato = 2;

y guardo un valor o bien:

var midato = "Nombre y Apellido"

y guardo un texto.

Son variables porque puedo ir cambiando su contenido y en algún momento, puedo poner que:

midato = midato + 100;

y el cajoncito ahora contendrá el valor 102, o bien:

midato = midato + " : Fulano de Tal";

y el cajoncito ahora contendrá el valor "Nombre y Apellido : Fulano de Tal"

Siempre, las defino al principio para evitar que algunos navegadores como Internet Explorer no las reconozcan cuando las vayamos a usar o "las declaro" colocando el nombre sin ningún valor:

var midato;

y si tengo varias, las separo con comas:

var midato, otrodato, utlimodato;

Es importante entender que JavaScript es sensible a minúsculas y mayúsculas así que estas tres variables, serán diferentes:

var midato, MIDATO, MiDato;

Como en las variables podemos poner casi cualquier contenido, una de las cosas que normalmente podemos usar son objetos como las etiquetas HTML. Podría parecer confuso pero, para decirlo de manera simple: un objeto es ... como un objeto. Una mesa es un objeto y como tal tiene propiedades, es de madera o de metal, tiene una cierta altura, un color; lo mismo ocurre con las etiquetas HTML, de alguna forma, son objetos rectangulares que tienen propiedades, un ancho, un alto, un color de fondo, están en cierta posición de nuestra página; y así como podemos modificar algunas propiedades de una mesa, también podemos modificar alguas propiedades de las etiquetas pero, como las computadoras no piensan, para hacer eso, debemos indicarles con exactitud a cual nos estamos refiriendo.

Por ejemplo, en una página web puede haber muchas etiquetas DIV y si nosotros queremos usar JavaScript para cambiar algo de uno de ellos, debemos identificarlo con claridad. Para eso existe el atributo ID que nos sirve para darle un nombre exclusivo a una etiqueta cualquiera de tal modo que podamos manipularla:

<div id="contenedor"> ... el contenido ... </div>

El ID nos permitirá darle propiedades con CSS:

#contenedor {}

pero también nos permitirá acceder a él desde JavaScript y para eso ya hay una función interna que nos ayuda:

document.getElementById("nombre_ID")

así que podría usarlo de este modo, guardándolo en una variable:

var micontenedor = document.getElementById("nombre_ID");

o leer sus propiedades de estilo con algo así:

document.getElementById("nombre_ID").style.PROPIEDAD

donde la PROPIEDAD tiene una sintaxis similar a la que usamos en CSS: color, width, height, display con algunas variantes cuando esas propiedades tienen nombres compuesto, por ejemplo a background-color se accede con backgroundColor y a padding-left se accede con paddingLeft; en general, eliminando ese guión y comenzando la segunda palabra con mayúsculas.

Quiere decir que si yo quiero saber cuál es el color y el ancho de esa etiqueta, escribiría esto:

elColor = document.getElementById("contenedor").style.color;
elAncho = document.getElementById("contenedor").style.width;

y usamos las variables para simplificar el código:

var elColor, elAncho;
var micontenedor = document.getElementById("contenedor");
elColor = micontenedor.style.color;
elAncho = micontenedor.style.width;

Asi como las leo, tambien puedo escribirlas:

micontenedor.style.color = "#F00"; // establecerá rojo como color
micontenedor.style.width ="300px"; // hará que tenga 300 pixeles de ancho

Esta es la idea básica que usamos cuando queremos tener una etiqueta cuyo contenido mantenemos oculto hasta que se hace click; permutamos una de sus propiedades (display) y lo hacemos con una función. Para el ejemplo, necesitamos un enlace que ejecute esa función y un DIV que de entrada, mantenemos oculto:

<a href="javascript:permutardisplay('contenedor');"> click acá para permutar de estado </a>
<div id="contenedor" style="display:none;"> ... el contenido ... </div>

Al hacer click, se ejecutará una función llamada permutardisplay a la que le enviaremos el nombre (el ID) de la etiqueta que queremos modificar. Esa función podría ser algo como esto:

<script>
function permutardisplay(cual) {
  // en una variable, guardo la etiqueta
  var micontenedor = document.getElementById(cual);
  // uso una condición; le pregunto ¿esa etiqueta es visible?
  if (micontenedor.style.display == "block") {
    // si la respuesta es SI (true) le cambio la propiedad y la oculto
    micontenedor.style.display = "none";
  } else {
    // en caso contrario, como la respuesta es NO (false) le cambio la propiedad y la hago visible
    micontenedor.style.display = "block";
  }
}
</script>

click acá para permutar de estado

... este es el contenido ...

Cada vez que haga click, el resultado de la condición cambiará y por lo tanto, si la etiqueta está oculta se mostrará y si esta visible se ocultará.

Esa es la utilidad de las funciones, permiten tener un solo código para ejecutar cosas similares; en este caso, usando la misma, indicándoles sobre cuál DIV actuar, permutamos tres DIVs diferentes:

<a href="javascript:permutardisplay('contenedor_1')">1</a>
<a href="javascript:permutardisplay('contenedor_2')">2</a>
<a href="javascript:permutardisplay('contenedor_3')">3</a>
<div id="contenedor_1" style="display:none;"> ... el contenido del ejemplo 1 ... </div>
<div id="contenedor_2" style="display:none;"> ... el contenido del ejemplo 2 ... </div>
<div id="contenedor_3" style="display:none;"> ... el contenido del ejemplo 3 ... </div>

1 | 2 | 3

... el contenido del ejemplo 1 ...

... el contenido del ejemplo 2 ...

... el contenido del ejemplo 3 ...