Question

我有一个javascript的问题。我想控制jumbotron颜色并将其设置为每3秒一个随机的。这里的问题是我不知道如何用JavaScript操纵CSS，因为我很新到javascript。我看到了一些其他的解决方案和其他一些线程，但它没有用。（我不知道我做错了什么）。我现在没有写入js代码，因为我删除了所有无效的代码。

.jumbotron { 
   background-color: #f14444 !important;
}
/*Without the !important rule it won't change color!*/

如果您有任何线程，您认为我没有检查过，我会很乐意检查它们，但我很自信地说我已经看过它们了。
无论如何，谢谢你的时间！

Answer 1

要更改背景颜色，只需选择元素并设置属性：

setTimeout(() => {
  document.querySelector('.jumbotron').style.backgroundColor = '#f14444';
}, 1000);

.jumbotron {
  height: 300px;
  width: 300px;
  background-color: black;
}

<div class="jumbotron"></div>

请注意，上面将选择具有给定类的第一个找到的元素，因此如果您需要定位特定元素，请考虑给它一个id并选择它作为上面显示的@Phil。

Answer 2

DOM中的Html元素具有style属性。

document.getElementById('something').style.backgroundColor = '#ccc'

请注意，CSS中的background-color等带连字符的属性通常是Javascript中的驼峰式（backgroundColor）。

Answer 3

您也可以使用keyframe animation

来实现它

以下是tutorial如何获取随机颜色

@-webkit-keyframes changeColors {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
}

@-moz-keyframes changeColors {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
}

@-ms-keyframes changeColors {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
}

.jumbotron {
  -webkit-animation: changeColors 3s infinite;
  -moz-animation: changeColors 3s infinite;
  -ms-animation: changeColors 3s infinite;
  background-color: #f14444;
}

<div class="jumbotron">
  Some text here
</div>

使用Javascript进行jumbotron颜色操作

3 个答案: