javascript - 将随机数插入到背景颜色的内联样式中

Question

我正在尝试使用 javascript 或 jquery 将 0-360 之间的随机数输出到和内联样式标记中，但我似乎无法弄清楚如何。任何帮助将不胜感激。

fiddle 附在这里 - https://jsfiddle.net/4c59f6aw/

<div style="background-color:hsl('value to go here', 100%, 50%)"></div>

Answer 1

一种简单的方法是通过 JavaScript 添加 CSS。

第一行取一个随机数字(最多 360)，第二行和第三行获取 #box div 并动态添加颜色。所以每一次页面刷新，都会给方框添加不同的颜色。

background-color 符号看起来可能很奇怪。它称为模板字符串，您可以阅读更多关于它的信息at MDN .

我不知道你为什么将 jQuery 标记为你的问题，因为它是一个库，需要由客户端下载。不需要达到您想要的结果。

var randomNumber = Math.floor(Math.random() * 360);

var myElement = document.querySelector("#box");
myElement.style.backgroundColor = `hsl(${randomNumber}, 100%, 50%)`;

div {
  height: 200px;
  width: 200px;
}

<div id="box"></div>