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