Javascript:更改 CSS 文件中定义的颜色值

Question

正如您在下面的代码片段中看到的，我使用 HTML 和 CSS 创建了一个简单的红色框。

我想创建一个 Javascript 文件，用于检查当月的当前日期:

1. 如果今天是该月的第一天，它应该以默认颜色显示该框。
2. 如果有不同的日期，则应将日期数字乘以某个十六进制数字，然后将其与 CSS 中的值相加。

我不知道是否可以将某些内容添加到十六进制数字，但我想应该可以。有人可以帮我弄这个吗？

div {
  background: linear-gradient(#C30000, #7E0000);
  height: 160px;
  width: 250px;
}

<div></div>

Answer 1

由于 div 的颜色每天都会改变，我建议您仅在 JavaScript 中而不是通过 CSS 设置 div 的颜色，以防止复杂化和不良行为。

设置 HTML 元素的颜色:

document.getElementById("your-div-id").style.background = color;

其中 color 是 string ，可以是常见的颜色名称(“蓝色”、“黑色”、“白色”等)或十六进制字符串(“#FFF”、“#123456”等)。

别忘了先给你的 div 一个 id 。 (例如 <div id="my-div"></div> )

正如我在评论中提到的，可以在 JavaScript 中声明十六进制数字，但在内部它仍然以十进制存储。虽然这不是问题，但调试时请注意。

将其转换为十六进制字符串(取自 here ):

var colorInHexString = colorInHexNumber.toString(16);

由于 HTML 只接受带有 # 前缀的十六进制字符串，所以不要忘记这样做。

如果您不知道如何获取该月的具体日期，可以从 here 获取。

tl;博士

完整代码:

<div id="my-div"></div>
<script>
    var defaultColor = 0xC30000;
    var multiplier = 0x20; // for example
    var dayNumber = new Date().getDate() - 1; // first day of month uses defaultColor
    var todayColor = defaultColor + dayNumber * multiplier;
    var todayColorString = "#" + todayColor.toString(16);
    document.getElementById("my-div").style.background = todayColorString;
</script>

希望这有帮助。