如何使用 javascript 设置 backgroundImage答案

【问题标题】：how to set backgroundImage with javascript如何使用 javascript 设置 backgroundImage
【发布时间】：2021-12-17 19:53:21
【问题描述】：

function myFunction2() {
  for (let i=1; i < 3; i++){
    if (i<2){
      var numhex = (Math.random() * 0xfffff * 1000000).toString(16);
      var hex1 = '#' + numhex.slice(0, 6);
      // return hex1;
      // console.log(hex1);
    }
    else {
      var numhex = (Math.random() * 0xfffff * 1000000).toString(16);
      var hex2 = '#' + numhex.slice(0, 6);
      // return hex2;
      // console.log(hex2);
    }
    
  }
  // document.getElementById("container").style.backgroundImage = "linear-gradient(to right, " + {hex1} + ", " + {hex2} + ")";
  document.getElementById("container").setProperty("background-image", "linear-gradient(to right, " + {hex1} + ", " + {hex2});
  document.getElementById("description").innerHTML = "The code of the color is: linear-gradient( 270deg, " + hex1 + ", " + hex2 + " );";
};

您好，我正在尝试为线性渐变设置两种颜色作为参数在特定元素的背景图像属性内，但似乎我的 setProperty 出了点问题。一切正常很好，除了这行代码。 我也试过 style.backgroundImage 没有结果。 我是 js 新手。 提前致谢

【问题讨论】：

您已包含 myFunction 的代码，但您没有在任何地方调用它，它也不会返回任何内容。
注释行是否正常工作？
-- Andy 它被称为我的 HTML 文件，但我没有发现在这里写下整个代码很有用，因为它的其余部分工作正常。 --Quippe 用 getElementById no 最后注释的行

标签： javascript css background-image getelementbyid linear-gradients

【解决方案1】：

使用下面的代码。成功了

document.getElementById('container').style.background = `linear-gradient(to right, ${hex1} , ${hex2} )`;

【讨论】：

非常感谢 Mukti。效果很好

【解决方案2】：

首先，这里有一个提示：不要使用 'var'，而是使用 'let'。 JS中没有setProperty()函数，需要使用element.style["style you want to change"] = "what you want to change it to"。并且，您不应该将变量包装在 '{}' 中，否则它们将成为非变量，因此代码应为：

function myFunction2() {
  for (let i=1; i < 3; i++){
    if (i<2){
      var numhex = (Math.random() * 0xfffff * 1000000).toString(16);
      var hex1 = '#' + numhex.slice(0, 6);
      // return hex1;
      // console.log(hex1);
    }
    else {
      var numhex = (Math.random() * 0xfffff * 1000000).toString(16);
      var hex2 = '#' + numhex.slice(0, 6);
      // return hex2;
      // console.log(hex2);
    }
    
  }
  document.getElementById("container").style["background-image"] = "linear-gradient(to right, " + hex1 + ", " + hex2 + ")";
  document.getElementById("description").innerHTML = "The code of the color is: linear-gradient( 270deg, " + hex1 + ", " + hex2 + " );";
};

另外，如果你使用的是 div，你也必须定义高度。

【讨论】：

"JS中没有setProperty()函数" 对，但是内联样式对象有上述方法。
你说得对，我把它与 CSS 声明块的 setProperty() 方法混淆了。