Javascript 无法更新渐变答案

【问题标题】：Javascript Can't Update GradientJavascript 无法更新渐变
【发布时间】：2021-03-29 07:19:36
【问题描述】：

我似乎无法更新已应用于导航栏的线性渐变。当我工作正常像这样在我的css文件中设置它

.navbar-light {
    background-image: linear-gradient(rgba(255, 204, 153, 1), 75%, rgba(255, 204, 153, 0));
}

但它似乎无法通过 Javascript 工作，即使我可以像这样在同一个函数中设置其他属性

function myFunc() {
    var nav = document.getElementById("myNavbar");
    nav.style.backgroundImage = "linear-gradient(rgba(255, 204, 153, 1), 90%, rgba(255, 204, 153, 0));"
    console.log(nav.style.backgroundImage);
}

我在这里做错了什么？

【问题讨论】：

我觉得这里不应该有半栏：rgba(255, 204, 153, 0));"

标签： javascript css css-gradients

【解决方案1】：

那些分号：P

(function myFunc() {
    var nav = document.getElementById("myNavbar");
    nav.style.backgroundImage = "linear-gradient(rgba(255, 204, 153, 1), 90%, rgba(255, 204, 153, 0))" // look on your code here
})()

.navbar-light {
    background-image: linear-gradient(rgba(255, 204, 153, 1), 75%, rgba(255, 204, 153, 0));
}

div.box{
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

<div class="box navbar-light"> 1 </div>

<div id="myNavbar" class="box"/> 2 </div>

【讨论】：