Блог

Главная - Вопросы по программированию - Изменение классов div с помощью Js

Изменение классов div с помощью Js

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь изменить классы div с помощью onclick, но, похоже, что-то не так с моим кодом, потому что он не работает.

 function changeColorsDay() {
  document.getElementById("wrap").classList.toggle("Day", true);
}  
 * {
  margin: 0;
}

#wrap {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  font: italic bold 15px arial, sans-serif;
  background-color: rgb(0, 14, 51);
  overflow-y: scroll;
  background-size: cover;
}

wrap.Day {
  background-color: rgb(240, 230, 232);
}  
 <div id="nav">
  <a href="#" class="Button">Home Page</a>
  <a type="button" class="Button" onclick="changeColorsDay()">Change</a>
</div>

Что я могу сделать, чтобы это заработало?

Комментарии:

1. Какой элемент имеет идентификатор wrap ?

2. стиль css для идентификатора должен иметь префикс #, т.Е. #wrap.day

3. Голосование закрыто, это просто ошибка опечатки.

Ответ №1:

я полагаю, вы пропустили ‘#’ в своем css

 #wrap.Day{
    background-color: rgb(240, 230, 232);
}

Ответ №2:

Вы неправильно указали элемент с идентификатором wrap . Также в вашем css вы пропустили # перед wrap.Day .

Я добавил div с идентификатором wrap и добавил селектор идентификаторов. Как вы можете видеть во фрагменте, он работает отлично.

 function changeColorsDay() {
  document.getElementById("wrap").classList.toggle("Day", true);
}  
 * {
  margin: 0;
}

#wrap {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  font: italic bold 15px arial, sans-serif;
  background-color: rgb(0, 14, 51);
  overflow-y: scroll;
  background-size: cover;
}

#wrap.Day {
  background-color: rgb(240, 230, 232);
}  
 <div id="nav">
  <a href="#" class="Button">Home Page</a>
  <a type="button" class="Button" onclick="changeColorsDay()">Change</a>
</div>

<div id="wrap">day</div>