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 ，可以是常用的颜色名称（“ blue”，“ black”，“ white”等）或十六进制字符串（“ #FFF”，“＃123456”等）。

别忘了先给您的div一个id 。 （例如<div id="my-div"></div> ）

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

要将其转换为十六进制字符串（从此处获取 ）：

var colorInHexString = colorInHexNumber.toString(16);

并且因为HTML仅接受带#前缀的十六进制字符串，所以请不要忘记这样做。

如果您不知道如何获取月份中的某天，则可以从此处获取。

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>

希望这可以帮助。

Answer 2

您可以通过以下方式在纯JavaScript中执行此操作：
var _someColor = '#7E0000'; // for example
document.getElementById("__DIV__NAME__").style.background = _someColor;

文件

jQuery具有执行相同功能的功能 。 也可以使用回调来进行颜色计算。

编辑：别忘了您也可以使用rgb（value，value，value），并且可以使计算更容易。

Answer 3

您可以尝试这样的事情。

$（'＃qaz'）。css（'Color'）使用此方法，您只会得到rgb颜色代码格式

通过使用javascript函数，我们可以获得rgb的十六进制代码

function rgb2hex(rgb){
 rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
 return (rgb && rgb.length === 4) ? "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}

然后将其转换为十六进制代码rgb2hex（$（'＃qaz'）。css（'Color'）），然后可以乘以数字并使用css样式属性设置颜色。