Entrada destacada

Como usar enums en Android, kotlin

el
0

Cómo cambiar el color de un elemento usando su clase en JavaScript

el
Podemos cambiar el color de fondo o cualquier propiedad de un elemento usando JavasScript, pero en esta entrada nos centraremos en los estilos de los elementos. 

Tal vez lo más sencillo con lo que se puede realizar esta acción es agregando un id con el que podamos acceder mediante la función getElementById("idElemento"), pero una forma un poco menos usual es accediendo a los elementos mediante su clase.

Veamos entonces las dos formas, a continuación.

Usando el id del elemento

Empecemos creando el código HTML, creando 2 elementos div que serán los contenedores principales, uno para los cuadros a los que les cambiaremos el color y otro para el selector de color. Los cuadros a los que cambiaremos el color también serán elementos div a los que les asignaremos id diferentes.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cambiar Color</title>
</head>
<body>
    <div class="contenedor">
        <div id="derecha"></div>
 <div id="centro"></div>
 <div id="izquierda"></div>   
 <p> Seleccione el cuadro al que desea cambiar su color</p>
    </div>
    <div class="controles">
 <label for="color">Seleccione color: </label>
 <input type="color" id="color">
    </div>
</body>
</html>

Y usando CSS le daremos un estilo inicial a toda la estructura para que lo que hemos hecho tenga una mejor presentación, si no se deseará usar el siguiente estilo no cambiaría la funcionalidad que después agregaremos en JavaScript.

.contenedor {
   overflow: hidden;
   border: 1px solid black;
   margin-bottom: 10px;
}

.contenedor div{
   width: 100px;
   height: 100px;
   background-color: #7F0C29;
   border: 4px solid #CCC114;
   float: left;
   margin: 2px; 
}

.controles {
   border: 1px solid black;
   padding: 10px;
}

Si aplicamos bien los estilos obtendremos un resultado como se muestra en la siguiente imagen.

Antes de pasar al script agregaremos un evento onclick a cada cuadro para poder saber a que elemento se desea cambiar el color, así cuando hagamos clic sobre alguno de los cuadros llamaremos a una función llamada cambiarColor() que recibirá el nombre del id del elemento seleccionado, con esto el último cuadro al que se haga clic será el elemento seleccionado.

<div id="derecha" onclick="cambiarColor('derecha')"></div>
<div id="centro" onclick="cambiarColor('centro')"></div>
<div id="izquierda" onclick="cambiarColor('izquierda')"></div>

Ahora el código JavaScript el cual sigue los siguientes pasos:

 1. Crear una variable que represente el elemento al que cambiaremos el color, inicialmente usaremos cualquiera de los id para iniciar la variable.
2. Definir una variable que almacene el elemento selector de color (input tipo color).
3. Detectar cuando el selector de colore ha cambiado, cuando esto pase, obtenemos el valor del color seleccionado, para cambiar el color de fondo del cuadro seleccionado, accedemos los estilos del objeto (style) y de los estilos accedemos a su propiedad backgroundColor.
4. Finalmente definimos la función cambiarColor la cual recibirá el id del div seleccionado y lo asignamos a la variable que almacena el elemento al que se desea cambiar el color.

var elementoSeleccionado = document.getElementById("derecha"); //default
var color = document.getElementById("color");

color.onchange = function() {
    elementoSeleccionado.style.backgroundColor = color.value;
}

function cambiarColor(identificador) {
    elementoSeleccionado = document.getElementById(identificador);
}


Usando la clase del elemento

Como vimos para acceder a los div usamos la sentencia document.getElementById(), pues para acceder a los elementos mediante su clase existe una función similar getElementsByClassName() y hasta aquí todo podría parecer similar, pero no del todo ya que con la función anterior obtenemos solo un elemento y con getElementsByClassName() se obtiene un arreglo de elementos. Por el momento para que todo funcione de igual forma podemos hacer un ajuste sencillo, solo accediendo al primer elemento del arreglo.

<body>
  <div class="contenedor">
    <div class="derecha" onclick="cambiarColor('derecha')"></div>
    <div class="centro" onclick="cambiarColor('centro')"></div>
    <div class="izquierda" onclick="cambiarColor('izquierda')"></div>
    <p> Seleccione el cuadro al que desea cambiar su color</p>
  </div>
  <div class="controles">
    <label for="color">Seleccione color: </label>
    <input type="color" id="color">
  </div>

  <script>
    var elementoSeleccionado = document.getElementsByClassName("derecha")[0]; //default
    var color = document.getElementById("color");
    
    color.onchange = function() {
      elementoSeleccionado.style.backgroundColor = color.value;
    };
    
    function cambiarColor(identificador) {
      elementoSeleccionado = document.getElementsByClassName(identificador)[0];
    }
  </script>
</body>

Ahora suponiendo que creamos mas elementos con esas mismas clases y quisiéramos cambiar el color de todos los elementos con la misma clase, podemos recorrer todo el arreglo de elementos e ir aplicando el nuevo color a cada elemento del arreglo.

var arregloElementos = document.getElementsByClassName("derecha"); //default
var color = document.getElementById("color");

color.onchange = function() {
    for(var indice in arregloElementos) {
        if(!isNaN(indice)) {
          arregloElementos[indice].style.background = color.value;
        }
    }
}

function cambiarColor(identificador) {
    arregloElementos = document.getElementsByClassName(identificador);
}


Podemos seguir haciendo variaciones usando clases y identificadores.

Resultados.
Ver el Pen cambiar color mediante clase de elemento js por Jesus Tepec (@JesusTepec) en CodePen.

Código completo.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Cambiar Color</title>
 <style type="text/css">

  .principal {
   border: 1px solid black;
   margin-bottom: 10px;
  }

  .contenedor {
   overflow: hidden;
  }

  .contenedor div{
   width: 100px;
   height: 100px;
   background-color: #7F0C29;
   border: 4px solid #CCC114;
   float: left;
   margin: 2px; 
  }

  .controles {
   border: 1px solid black;
   padding: 10px;
  }

 </style>
</head>
<body>
 <p> Seleccione el cuadro al que desea cambiar su color</p>
 <div class="principal">
 <div class="contenedor">
  <div class="derecha" onclick="cambiarColor('derecha')"></div>
  <div class="centro" onclick="cambiarColor('centro')"></div>
  <div class="izquierda" onclick="cambiarColor('izquierda')"></div>   
 </div>
  <div class="contenedor">
  <div class="derecha" onclick="cambiarColor('derecha')"></div>
  <div class="centro" onclick="cambiarColor('centro')"></div>
  <div class="izquierda" onclick="cambiarColor('izquierda')"></div>   
 </div>
  <div class="contenedor">
  <div class="derecha" onclick="cambiarColor('derecha')"></div>
  <div class="centro" onclick="cambiarColor('centro')"></div>
  <div class="izquierda" onclick="cambiarColor('izquierda')"></div>   
 </div>
 </div>
 <div class="controles">
   <label for="color">Seleccione color: </label>
  <input type="color" id="color">
 </div>

 <script>

  var arregloElementos = document.getElementsByClassName("derecha"); //default
  var color = document.getElementById("color");

  color.onchange = function() {
   for(var indice in arregloElementos) {
      if(!isNaN(indice)) {
        arregloElementos[indice].style.background = color.value;
      }
    }
  }

  function cambiarColor(identificador) {
   arregloElementos = document.getElementsByClassName(identificador);
  }

 </script>
</body>
</html>

Comenta tus dudas en la sección de comentarios.

Comentarios

Publicar un comentario