修改a：在Javascript中的样式之前的背景。 （没有图书馆）

Question

在我的应用程序中，我正在使用:before作为图像背景。这是为了“锐化”容器中的图像，因为它使用-webkit-filter: blur()。

问题是我找不到使用Javascript更改:before样式的方法。我需要将背景图像更改为前景图像。

示例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源实际上是从我的服务器进来的，所以我需要背景来匹配图像，所以边缘（来自模糊）看起来并不邋and和冲突。

所以这里的问题是，如何更改background: url() CSS样式的#image-container:before值？

没有图书馆。纯粹的Javascript。

Answer 1

尝试以下代码。供参考 -
http://davidwalsh.name/pseudo-element
http://pankajparashar.com/posts/modify-pseudo-elements-css/
你的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);