CSS Attr绑定到伪元素的背景图像属性

Question

我在html元素上有数据属性

data-tmpltImage="{{swatchImgUrl}}" 

我的问题是如何在伪元素背景图像之前设置元素::以下内容...

.element::before
{
 background:url(attr(data-tmpltImage));
}

如果不可能，我怎样才能使用JQuery实现这一目标？

Answer 1

无法选择伪元素，因为它们不是dom的一部分。因此，您无法使用js将样式应用于任何伪元素。

但是，您可以像这样添加css到页面：

var bg = $('.element').data('tmpltImage');
$('head').append('<style>.element::before{background-image: url(' + bg + ')}</style>');