JMiur [E]

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>

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

8 comentarios:

Gem@  

Muy bueno :)
¿El buscador es nuevo?

Responder
JMiur  

Si y no. En realidad es el buscador de Google porque quité el widget de Blogger. Es que me cansé que no funcionara hace dias y al parecer, ni se han enterado que no anda.

Responder
Gem@  

Eso es porque están muy ocupados con las mejoras jajajaja me da risa esa palabra.

Responder
JMiur  

Sí. Eso debe ser. Ya se sabe que es gente que se excita rápido; deben tener problemas hormonales :-)

Responder
k_nelita  

JM se puede usar ese script del principio de la entrada para ocultar un gadget? Ejemplo el FeedJit de mi blog, el de Bailando, que tiene un script mucho mas complejo y con IE 9 da error, o mejor dicho se ve expandido el Feedjit, en lugar de oculto como quiero que quede...

Responder
JMiur  

Sí. Se puede usar para cualquier contenido, basta que esté identificado con un ID único.

Responder
RespuestasVeganas.Org  

Hola.

Tengo una pregunta. ¿Se podría utilizar este sistema para cambiar el color de fondo de una entrada? Mi intención es poder cambiar el color de texto claro con fondo oscuro a texto oscuro con fondo blanco. Es que hay personas a las que les resulta más cómodo leer de una de estas maneras y a otras personas de la otra.

Muchas gracias.

Saludos.
David.

JMiur  

Sí, por supuesto pero, depende de la forma en que estén armadas las entradas y de la plantilla que estés utilizando.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR