在Javascript中修改：before样式的背景。（无图书馆）

在我的应用程序中，我使用：before作为图像背景。这是为了锐化容器中的图像，因为它使用了-webkit过滤器：blur

问题是，我找不到一种方法来更改：before样式（使用Javascript）。我需要将背景图像更改为任何前景图像

CSS示例：

#image-container:before {
    background: url(img.png);
    content: '';
    position: fixed;
    z-index: -1;
    display: block;
    height: 40%;
}

#image-container {
    position: relative;
    width: 100%;
    height: 58%;
    overflow: hidden;
}

.blur {
    -webkit-filter: blur(10px);
}

在图像容器中，我有以下代码：

<div id="image-container">
    <img class="blur" src="img.png" width="100%" height="100%">
</div>

问题是img源实际上来自我的服务器，所以我需要背景与图像匹配，这样模糊的边缘就不会显得杂乱和冲突

所以这里的问题是，如何更改图像容器：在CSS样式之前的background:url值

---

没有图书馆。纯Javascript。

尝试下面的代码。供参考- 你的css是这样的

#image-container:before {
   background: url(img.png);
   content: '';
   position: fixed;
   z-index: -1;
   display: block;
   height: 40%;
}

下面是获取背景信息的js

var color = window.getComputedStyle(
  document.querySelector('#image-container'), ':before'
).getPropertyValue('color')

以及设置新的css属性

var style = document.createElement("style");

// Append the style tag to head
document.head.appendChild(style);

// Grab the stylesheet object
sheet = style.sheet

// Use addRule or insertRule to inject styles
sheet.addRule('#image-container::before','color: green');
sheet.insertRule('#image-container::before { color: green }', 0);

---

这个答案显示了如何访问和检索：before样式中的值。如何更改该值？在你的链接中也没有提到。