jQuery

Cambiar el color de una etiqueta con jQuery

En esta oportunidad les voy a traer otro sencillo tutorial para que puedan aprender a cambiar el color de una etiqueta con jQuery y Java Script de forma dinámica, esta funcionalidad puede ser muy útil en diversos casos como por ejemplo cuando se quiere crear un botón que cambie de color cuando se presiona o se ponga el cursor sobre él, ente otros posibles.

Cómo cambiar el color de una etiqueta o tag HTML con jQuery y Java Script

Antes de mostrar como realizar esta sencilla función es muy importante recordarles que deben importar la librería de jQuery, en el siguiente código la vamos a incluir directamente desde la nube pero ustedes lo pueden hacer descargando el archivo en sus computadoras.

Luego de que tengan configurado la librería de jQuery vamos a empezar a programar, como primer paso vamos a crear una etiqueta con la clase box, la cual va a tener un tamaño de 100×100 px, esto es muy importante ya que si la etiqueta no tiene un tamaño predefinido o no contiene nada (como puede ser un texto) no se va a mostrar el color de fondo.

Luego con jQuery y Java Script simplemente vamos a obtener la etiqueta para cambiar su color de fondo a rojo, modificando la propiedad CSS backgrand con la función CSS que proporciona jQuery.

<html>
  <head>
    <title>Cambiar el color de una etiqueta con jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
      .box {
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
    </div>
    <script>
      $(function(){
        $('.box').css('background', 'red');
      })
    </script>
  </body>
</html>

Al ejecutar el código anterior en su navegador vas a poder ver un cuadrado de color rojo, en caso de que quieras poner otro color simplemente debes cambiar el valor de la propiedad por otro.

Eso es todo por hoy, espero que les sea de gran utilidad este aporte, ante cualquier inconveniente no duden en dejar un mensaje.

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

One comment

  1. Buenas..
    Tengo una duda, como hacer lo mismo pero cambiando a varios colores. Me explico, tengo un botón que cambia el background de un div al hacer click, necesito hacer que cada vez que se haga click cambie a un color diferente.

    Gracias..

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *