Cambiar los colores de manera dinámica

Usando JavaScript es sencillo cambiar las propiedades CSS de cualquier etiqueta, basta que las identifiquemos de alguna manera dándoles un ID, un nombre único. Es algo que usamos habitualmente para mostrar u ocultar cosas:

<script>
function permutardisplay(cual) {
  var micontenedor = document.getElementById(cual);
  if (micontenedor.style.display == "block") {
    micontenedor.style.display = "none";
  } else {
    micontenedor.style.display = "block";
  }
}
</script>

<div style="display: none;" id="micontenedor"> ... este es el contenido ... </div>

<a href="javascript:permutardisplay('micontenedor')"> click acá para permutar de estado </a>

click acá para permutar de estado

... este es el contenido ...

Pero, mostrar y ocultar no es lo único que puede cambiarse, lo mismo puede hacerse con cualquier otra propiedad ya que todas ellas tienen una equivalencia.

Las librerías como jQuery ya poseen una serie de funciones específicas para hacer eso lo que evita el trabajo de escribir códigos largos; por ejemplo, supongamos que queremos cambiar el color de los textos de un DIV, usando esa librería podríamos usar una función así:

function cambiarColorTexto(elcolor) { $("#nombreDIV").css("color",elcolor); }

Y de manera similar, podríamos cambiar el color de los enlaces que estén dentro del DIV:

function cambiarColorEnlaces(elcolor) { $("#nombreDIV a").css("color",elcolor); }

o el color del borde:

function cambiarColorBorde(elcolor) { $("#nombreDIV").css("border-color",elcolor); }

o el color de fondo de alguna otra etiqueta:

function cambiarColoFondo(elcolor) { $("#democolor span").css("background-color",elcolor); }

Lo podemos hacer mediante enlaces que llamen a esas funciones:

<a href="javascript:cambiarColorTexto('#F00')"> cambiar color textos </a>
<a href="javascript:cambiarColorBorde('#F00')"> cambiar color borde </a>
<a href="javascript:cambiarColorEnlaces('#F00')"> cambiar color enlaces </a>
<a href="javascript:cambiarColoFondo('#F00')"> cambiar color fondo </a>

Claro que no es necesario usar librerías, lo mismo puede hacerse sin ellas de distintos modos; una forma fácil es buscar ciertas etiquetas adentro del contenedor, guardarlas en una lista y cambiar su estilo:

<script>

// cambio el color de los enlaces buscando todas las etiquetas A que existan en ese DIV
function cambiarColorEnlaces(elcolor) {
  var contenedor = document.getElementById("nombreDIV");
  var lista = contenedor.getElementsByTagName("a");
  for(var i=0; i<lista.length; ++i) {lista[i].style.color = elcolor;}
}

// cambio el color de fondo de todas las etiquetas SPAN que existan en ese DIV
function cambiarColoFondo(elcolor) {
  var contenedor = document.getElementById("nombreDIV");
  var lista = contenedor.getElementsByTagName("span");
  for(var i=0; i<lista.length; ++i) {lista[i].style.backgroundColor = elcolor;}
}

// cambio el color del borde de ese DIV
function cambiarColorBorde(elcolor) {
  var contenedor = document.getElementById("nombreDIV");
  contenedor.style.borderColor = elcolor;
}

// cambio todo eso al mismo tiempo
function cambiarTodos(elcolor) {
  // el DIV
  var contenedor = document.getElementById("nombreDIV");
  // busco los enlaces y cambio el color
  var lista = contenedor.getElementsByTagName("a");
  for(var i=0; i<lista.length; ++i) {lista[i].style.color = elcolor;}
  // busco los spans y cambio el color
  var lista = contenedor.getElementsByTagName("span");
  for(var i=0; i<lista.length; ++i) {lista[i].style.backgroundColor = elcolor;}
  // cambio el color del borde
  contenedor.style.borderColor = elcolor;
}
</script>

<a href="javascript:void(0);" onclick="cambiarTodos('#FF0')"> todos amarillos </a>

Mauris sem nulla, tincidunt vel pretium sed, ultrices sit amet orci. Vivamus mi diam, scelerisque at congue in, gravida sit amet diam. Duis non quam orci. Sed a leo vel nisi rhoncus commodo in ac lorem. Pellentesque euismod, tortor id elementum fringilla, neque arcu facilisis lacus, sed aliquet neque magna lacinia odio. Nunc semper volutpat pellentesque. Curabitur hendrerit ullamcorper mi ut pharetra. Praesent tincidunt commodo gravida. In hac habitasse platea dictumst. Proin ante justo, iaculis nec accumsan vitae, blandit vel felis.

ENLACES: rojo | verde | amarillo | azul

FONDO: rojo | verde | amarillo | azul

BORDE: rojo | verde | amarillo | azul

TODOS: rojo | verde | amarillo | azul