7

Estoy intentando que los usuarios puedan cambiar el color principal (.primary-color) de mi página, escogiendo entre unos colores preestablecidos.

Encontré este pequeño snippet

function change(i) {

  var color = document.getElementById("color");

  color.style.backgroundColor = i;

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

#color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div id="color"></div>

Se presentan 4 colores a escoger para aplicar al quinto DIV. Funciona bien.

Pero si quiero cambiar el quinto DIV, es decir pasar del ID a una clase, no me funciona:

function change(i) {

  var color = document.getElementsByClassName("color");

  color.style.backgroundColor = i;

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div class="color"></div>

Aquí en el sitio hay un tema similar pero no me quedó del todo claro: ¿Cual es la diferencia entre seleccionar por ID o ClassName?

No conozco mucho JS, puede ser un error de tipeo? Muchas gracias de antemano

2 respuestas 2

7

Cuando coges con el nombre de la clase, te coge un array mpor lo que tienes que recorrer los elemntos para poder cambiar el estilo de estos.

function change(colorName) {

  var elements = document.getElementsByClassName("color");
  for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor=colorName;
    }
 

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div class="color"></div>

7
  • Gracias por tu respuesta, indepedendiente del color que escoga, siempre me pinta de azul. Quisiera saber ¿porqué lo usas en el código JS?
    – EMCode
    Commented el 27 feb. 2019 a las 15:40
  • @AMCode cambia el parámetro que pasas en tu función para que no choque con la variable i y ese parámetro ponlo elements[i].style.backgroundColor= j;, le puso blue de forma estática. Commented el 27 feb. 2019 a las 15:50
  • 2
    hola @Horacio Sanchez las ediciones que se proponen a las respuestas no deben ir en contra del contenido original publicado en las mismas, pues eso se toma como vandalismo, si consideras que quien respondió tiene errores, déjale un comentario aquí pero no le modifiques el código de su aporte
    – user75901
    Commented el 27 feb. 2019 a las 15:58
  • @VickMuñoz sin funcionar. No debería dar primero un valor a j?
    – EMCode
    Commented el 27 feb. 2019 a las 16:16
  • 2
    No tienes porqué Iñigo, muchas gracias a todos ustedes por su tiempo y compartir sus conocimientos. Es muy unida esta comunidad. Les agradezco de verdad de todo corazon
    – EMCode
    Commented el 27 feb. 2019 a las 18:04
6

La diferencia radica en lo que devuelve cada uno de los métodos:

Por id

document.getElementById("color");

La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.

Por clase

document.getElementsByClassName("color");

La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve una colección de todos los elementos que posean dicha clase. Por ello, para poder referenciar a <div id="color"></div> deberías hacer:

document.getElementsByClassName("color")[0];

Con esto accederías al primer elemento que salga en el DOM de tu página y que tenga la clase "color". En tu caso, al tener solamente uno estarías referenciándolo correctamente.

EDIT

Añado snipped para mayor claridad y uniendo a mi solución la que propuso @Iñigo Irigoyen Erquicia:

function change(color) {

  var elements = document.getElementsByClassName("color");
  for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor=color;
  }
 

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div class="color"></div>
<div class="color"></div>
<div class="color"></div>

7
  • Sólo debería aplicar ese cambio? Porque no me funciona lamentablemente
    – EMCode
    Commented el 27 feb. 2019 a las 15:43
  • Mis disculpas. Me debió de dar un lapsus mental. Ahora si se encuentra bien referenciado el elemento. El indicador de índice de array [0] debe de ir después de haber seleccionado los elementos de la clase deseada.
    – phpMyGuel
    Commented el 27 feb. 2019 a las 15:49
  • 1
    Funciona, pero al ser una clase, se presenta varias veces en el html, si triplico el ultimo div, el indice [0] solo se aplica al 1er div. ¿Cómo hago para que se aplique a todos los elementos que tengan la misma clase?
    – EMCode
    Commented el 27 feb. 2019 a las 16:03
  • Creo que este código podria ayudar: w3schools.com/jsref/…
    – EMCode
    Commented el 27 feb. 2019 a las 16:20
  • Para hacer eso que dices deberías hacer lo que el compañero Iñigo Irigoyen Erquicia propuso en su respuesta. Un bucle for que recorra toda esa colección de elementos (gracias por la corrección @Pablo Lozano) y que les vaya cambiando el color.
    – phpMyGuel
    Commented el 27 feb. 2019 a las 16:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.