使用JS更新CSS渐变

Question

请解释更新计算样式的正确方法，即在 CSS 文档中设置。 document.body.style.background 将采用颜色但不采用渐变。 示例如下：

<button onclick="myFunction()">Set background</button>

<script>
function myFunction() {
    foo = "#fedcba";
    faa = "linear-gradient(45deg, #abcdef, #fedcba);";
    document.body.style.background = faa;  //foo works, faa doesn't work
}
</script>

我尝试了 document.body.style.background 的许多不同迭代，并阅读了一些选择器只读而其他选择器可以操作的地方。

我现在的代码：添加了注释

来自 CSS 文件的样式：

body {
    background-color: #fedcba;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    font-size: 1.2em;
    background: -webkit-linear-gradient(315deg, #fedcba, #444);
    background: -moz-linear-gradient(315deg, #fedcba, #444);
    background: -o-linear-gradient(315deg, #fedcba, #444);
    background: -ms-linear-gradient(315deg, #fedcba, #444);
    background: linear-gradient(135deg, rgba(10, 100, 0, 100), rgba(200, 200, 200, 100));
    background-repeat: no-repeat;
    background-attachment: fixed;
}


function setGradient() {
    const style = getComputedStyle(body); // reads the CSS for the body style
    const background = style.background; //selects the background style
    console.info("background: ", background); //writes the style to the console for trouble shooting
    var prefix = getCssValuePrefix(); //gets browser prefix -o-, -moz-, -webkit-, -ms-
    var orentation = slider; // a number from 0 to 360
    var something = prefix + "linear-gradient(" + orentation + "deg, " + color1 + ", " + color2 +")";     
    //builds a string for the background :: here I have also tried color1.value and color2.value 
    console.info("setGradient before: ", something); //displays the gradient before being set
    document.body.style.background = something; // should set the background to the new gradient
    console.info("setGradient after: ", something); //shows that the variables are null
}

// the console returns: setGradient before:  -webkit-linear-gradient(nulldeg, null, null)

//Pick and set Bkground colors and orentation
color1.addEventListener("color1", setGradient); //color1 from colorpicker input
color2.addEventListener("color2", setGradient); //color2 from colorpicker input
slider.oninput = setGradient(); //a number from 0-360 step 1 value 180

Answer 1

这只是一个小错字。 你需要删除; 使其成为有效的 CSS 值。

 <button onclick="myFunction()">Set background</button> <script> function myFunction() { let faa = "linear-gradient(45deg, #abcdef, #fedcba)"; document.body.style.background = faa; } </script>