如何用JavaScript设置元素backgroundImage线性渐变背景及代码排查

你的代码存在3个明确的语法错误，修复后即可正常运行：

• 错误1：setProperty是DOM元素style属性下的方法，不能直接在DOM元素本体调用，正确调用格式为元素.style.setProperty(属性名, 属性值)
• 错误2：普通字符串拼接时不需要用{}包裹变量，{hex1}会被识别为匿名对象，转成字符串后会变成[object Object]，直接写变量名hex1即可
• 错误3：拼接linear-gradient属性值时，结尾缺少右括号)，导致CSS语法非法，无法被浏览器识别

另外你用循环生成两个颜色的写法完全没必要，直接分别生成两次代码更简洁，同时你原来的随机颜色生成逻辑可能出现长度不足6位的情况，补充padStart方法补0可以避免生成非法颜色值。

修复后可运行代码 #

function myFunction2() {
  // 生成两个合法的十六进制颜色值
  const hex1 = '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
  const hex2 = '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');

  // 两种赋值方式二选一即可
  // 方式1：直接赋值给style.backgroundImage
  document.getElementById("container").style.backgroundImage = `linear-gradient(to right, ${hex1}, ${hex2})`;
  // 方式2：使用setProperty方法
  // document.getElementById("container").style.setProperty("background-image", `linear-gradient(to right, ${hex1}, ${hex2})`);

  document.getElementById("description").innerHTML = `The code of the color is: linear-gradient( 270deg, ${hex1}, ${hex2} );`;
}

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