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樣式屬性設置顏色。