在JavaScript中设置linear-gradient线性渐变背景不生效如何修复

问题原因 #

• linear-gradient() 是CSS的渐变图像值，不属于纯色取值范围，所以不能赋值给backgroundColor属性（该属性仅接受纯色值），这是渐变不生效的核心原因。

修复方案 #

把代码中修改backgroundColor的逻辑，改成修改backgroundImage属性即可，修改后的代码如下：

var date = new Date();
var hours = date.getHours();
var day = date.getDay();
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var month = date.getMonth();

if (month == 4) {
    // 仅修改这一行的属性名即可
    document.getElementById("container").style.backgroundImage = `linear-gradient(red, yellow, green)`;
    alert("test");
}

额外排查点 #

如果修改后还是看不到渐变效果，可以再检查两个点：

• 确认id为container的元素存在，且有明确的宽高设置，如果元素高度为0自然看不到背景
• 如果你是要给整个页面设置渐变，直接替换选择对象为document.body即可，不需要额外绑定容器元素

内容的提问来源于stack exchange，提问作者Kevin D