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（应该工作相同），则可以使用regex replace删除现有的图像URL并将其替换为新的图像URL。 / p>

下面的方法使用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>

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

1 个答案: