javascript - JS - 动态添加第二张背景图片

Question

我想创建具有线性渐变的预定义按钮作为背景图像，但是在页面本身中，当我创建按钮(通过 JS)时，我想在按钮上动态添加图片作为背景。

通常，如果我像下面这样在 CSS 中为每个按钮添加图像:

button{
    width:96px; height:96px; border-radius:50%;
    background:radial-gradient(48px 48px,rgba(0,0,255,0),rgba(0,0,255,0) 60%, #00f 70%),url('OK.png');
}

它会工作 - 但如果我需要这样做，我将需要为每个图像创建自定义类，这对我来说不方便，也不是我想要的那样动态。通过将 CSS 保留为我想要的模板:

button{
    width:96px; height:96px; border-radius:50%;
    background:radial-gradient(48px 48px,rgba(0,0,255,0),rgba(0,0,255,0) 60%, #00f 70%);
}

在JS中如果我想动态添加图片到

ButtonOK.style.backGroundImage="OK.png"; 

它将覆盖渐变(显而易见)。我无法将 CSS 代码“复制”到 JS 中，因为我想将它留在那里(以防我的一个用户将更改 css 中的渐变颜色 - 我的 JS 文件需要为此更改做好准备。

我可以:

styleSheets[0].cssRules[ToFindTheRuleIndex].style.backgroundImage+",url('"+GivenImage+"');"

但是，这种方式我需要假设用户在 CSS 中指定了背景图像属性并且使用的样式表是 0 中唯一的默认样式表，或者即使其他自定义 CSS 文件，默认样式表仍然是第一个。需要把JS函数做的太长太复杂……

问题:
如何在 JS 中将图像添加到线性渐变之上，使其与我的第一个示例一样？请求纯 JS 解决方案。

非常感谢:)

Answer 1

如果您愿意使用 background-image 而不是 background (效果应该相同)，您可以使用正则表达式替换来删除现有的图像 URL 和用新的替换它。

下面的方法使用 getComputedStyle 以便它从您的 CSS 中提取背景，只替换末尾的图像。

function replaceBackgroundImage(element, newImage) {
    var bg = getComputedStyle(element).getPropertyValue("background-image");
    bg = `${bg.replace(/, url\((.*)\)/g, '')}, url('${newImage}')`;
    element.style.backgroundImage = bg;
}

var ButtonOK = document.getElementById("ok");

replaceBackgroundImage(ButtonOK, "MyNewImage.png");
console.log(ButtonOK.style.backgroundImage);

replaceBackgroundImage(ButtonOK, "AnotherImage.png");
console.log(ButtonOK.style.backgroundImage);

#ok {
  padding: 40px;
  background-image: radial-gradient(48px 48px, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0) 60%, #00f 70%);
}

<button id="ok">OK</button>