Изменить CSS с помощью JavaScript

Question

Привет, у меня проблемы с изменением класса CSS с помощью javascript, всякий раз, когда я вызываю элемент и пытаюсь изменить стиль, он возвращает значение null, почти как с элементом, с которым не связан класс, мой код выглядит так

var box = document.getElementById('box1');

box.style.backgroundColor = red;

.box {
      background-color: black;
}

<div id=“box1“ class="box">

Каким-то образом при входе в консоль стиль box (of js) цвет фона становится пустым

Answer 1

Вы можете изменить CSS с помощью .css () jquery.

Попробуйте:

 $( document ).ready(function() {
 $('#box1').css("background-color", "red")
 })
 

 .box {
  background-color: black;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="box1" class="box">
CSS
</div>

Answer 2

Используйте правильные кавычки вокруг вашего атрибута ID. Также используйте «красный» вместо только красного.

  var box = document.getElementById('box1');
  box.style.backgroundColor = "red";

 .box {
  background-color: black;
  }

<div id="box1" class="box">
CSS
</div>

Answer 3

setTimeout(function() {
  $(".box").css("background-color", "red");
}, 3000);

.box {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id=“box1” class="box">Box 1</div>

Answer 4

это должно работать

  var box = document.getElementById('box1');
  box.style.backgroundColor = "red"; //you were just typing red earlier
  box.style.width="100px";
  box.style.height="100px";