Я пытаюсь сделать так, чтобы пользователи смогли менять главный цвет (.primary-color
) моей страницы, выбирая между установленными заранее цветами.
Я нашел этот малыш 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>
Появляются 4 цвета, которые нужно выбирать, чтобы применяться к пятому DIV. Функционируй хорошо.
Но если я хочу изменить пятого DIV, а именно переходить из идентификации в класс, оно я не функционирует:
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>
Здесь в сайте есть сходная тема, но он у меня не остался совсем ясным: Каково различие между выбиранием из-за идентификации или ClassName?
Я не знаю много JS, смоги быть ошибкой tipeo? Большое спасибо заранее