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

Question

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

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

如果今天是该月的第一天，它应该以默认颜色显示框。
如果有不同的一天，它应该将天数乘以某个十六进制数，然后将其加起来等于CSS中的值。

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

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

<div></div>

Answer 1

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

Docs

jQuery 有 a function 做同样的事情。也可以使用回调来计算颜色。

编辑：别忘了您也可以使用 rgb(value,value,value)，并且可以使计算更容易一些。

Answer 2

由于div的颜色每天都会变化，所以我建议您只在JavaScript中设置div的颜色，而不是通过CSS来设置防止并发症和不良行为。

设置 HTML 元素的颜色：

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

其中 color 是 string，可以是常见的颜色名称（"blue"、"black"、"white" 等）或十六进制字符串（" #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>

希望这对您有所帮助。

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')) 然后你可以乘以数字并使用 [=21= 设置颜色] 样式属性。

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

Javascript: Changing defined color value in a CSS file

javascript

hex

tl;博士