有沒有辦法自動改變背景顏色的陰影？

Question

想知道是否有一種方法可以使用光譜來根據變量（例如溫度）來改變背景顏色，溫度越高，顏色就越從藍色變為橙色？ 還是我實際上必須分配值

if (temp < 10) {
document.body.className = "background-cold";
} else if (temp > 10) {
document.body.className = "background-warm";
}

.background-cold {
  background: linear-gradient(
    179.31deg,
    rgba(48, 87, 89, 0.97) 9.28%,
    #fdfeff 167.45%
  );
}

.background-warm {
  background: linear-gradient(
    179.31deg,
    rgba(204, 101, 26, 0.97) 9.28%,
    #fdfeff 167.45%
  );
}

Answer 1

var hue = temp * someScale; // use some formula to determine the appropriate hue from the temperature
var saturation = 1;
var lightness = 1;
document.body.style.backgroundImage = `linear-gradient(179.31deg, hsla(${hue}%,${saturation}%,${lightness}%) 9.28%, #fdfeff 167.45%)`;

Answer 2

對於您打算使用的方法，我不建議使用.className屬性。 它將被硬編碼，這不是你想要的。 您可以只使用style.setProperty(string, string) ，其中第一個參數是CSS 屬性，第二個參數是CSS 值。 它們都需要是字符串才能工作。

let colorValue = 'linear-gradient(VALUES)';
document.body.style.setProperty('background', colorValue);

通過使用前面的代碼，您現在可以直接設置所需的背景。 但是，您仍然需要 function 來根據溫度創建動態colorValue 。 根據您打算應用的顏色值，這可能會變得有點復雜。 可以在以下鏈接中找到可能的解決方案： https://stackoverflow.com/a/12934900/11860800 。

我希望這個答案對你有幫助！ 快樂編碼！