更改angular2中伪元素的样式 [英] Change style of pseudo elements in angular2

问题描述

是否可以在angular2中使用[style]或[ngStyle]更改伪元素的样式?

Is it possible to change style of pseudo elements using [style] or [ngStyle] in angular2?

为了在div上获得模糊效果，其作用类似于覆盖，我应该在伪元素上设置背景图像.

in order to get a blur effect on a div acts like an overlay, and I should set up background-image on pseudo element.

我尝试了

<div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ' )'">

它没有用.我也试过了

<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ' )}}'">

推荐答案

否，这不可能.实际上，这不是一个Angular问题:伪元素不是DOM树的一部分，因此不会暴露任何可用于与其交互的DOM API.

No it's not possible. It is actually not an Angular issue: pseudo elements are not part of DOM tree, and because of that do not expose any DOM API that can be used to interact with them.

如果要以编程方式处理伪元素，通常的方法是间接的:添加/删除/更改类，并在CSS中使该类影响相应的伪元素.因此，在您的情况下，您可以再增加一个更改必要样式的类:

Usual approach if you want to deal with pseudo elements programmatically is indirect: you add/remove/change class and in CSS make this class affect corresponding pseudo-element. So in your case you could have one more class that changes necessary style:

.blur:before {/* some styles */}
.blur.background:before {/* set background */}

现在，您需要做的就是在需要before伪元素获取背景时在元素上切换.background类.例如，您可以使用NgClass.

Now all you need to do is to toggle .background class on the element when you need before pseudo-element to get a background. You can use NgClass, for example.

这篇关于更改angular2中伪元素的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！