Question

我有一个更改css颜色的js代码，但我的问题是，我不能顺利地改变颜色。

HTML：

<html id="html">

这是css：

html{
    background:radial-gradient(circle, #ffffff, #aaaaaa);
    transition:all 5s linear;
}

那就是简单的js：

function changecolor(r,g,b){
    var bg = document.getElementById("html");
    bg.style.backgroundImage = 'radial-gradient(circle, #ffffff, #'+r+g+b+ ')';
};

然后在代码的某处：

changecolor(9,0,0);

颜色变化很好但过渡不起作用。就像我之前说的那样，我希望颜色能够顺利改变。

有人能帮帮我吗？谢谢！

Answer 1

我相信使用javascript设置CSS意味着绕过了transition。我建议使用javascript设置class，然后使用CSS来管理样式：

function changecolor(r,g,b){
    var bg = document.getElementById("html");
    bg.className = "alt-bg";
};

CSS：

.alt-bg {
  background-image: styles-here;
}

注意：这不考虑您通过变量设置颜色，它取决于您的具体需求是否适用于您。 IMO最好添加/删除类，并找出一种方法，使颜色在其他地方变量，如果可能的话。

css用js平滑地改变颜色

1 个答案: