更改angular2中伪元素的样式

Posted 2023-03-06

【中文标题】更改angular2中伪元素的样式

【英文标题】：Change style of pseudo elements in angular2

【发布时间】：2016-05-18 17:36:50

【问题描述】：

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

为了在 div 上获得模糊效果，就像叠加一样，我应该在伪元素上设置背景图像。

我尝试了类似的东西

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

它没有工作。我也试过这个

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

【问题讨论】：

解决方法 - ***.com/a/58485547/5043867

【参考方案1】：

您可以使用 CSS 变量来实现您所需要的。

在您的样式表中，您可以像这样设置背景图片：

.featured-image:after       content: '';
                             background-image: var(--featured-image); 
                           

之后，您可以通过编程方式在 DOM 树中的同一元素或更高的元素上设置此变量：

<div class="featured-image" [ngStyle]="'--featured-image': featuredImage">

这里有更多关于 CSS 变量的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables 请注意，浏览器支持还不完整。

另请注意，您需要使用sanitizer.bypassSecurityTrustResourceUrl(path) 或sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')) 清理网址/样式：

【讨论】：

我从 http 响应中获取图像源，所以我无法从我的样式表中设置背景

[attr.style]="sanitizer.bypassSecurityTrustStyle('--custom:' + value)" 帮了我

有一个不错的包叫：github.com/lironbob/ngx-css-variables，在尝试这个技巧时非常方便

@sqwk，你是救生员！它适用于 Chrome 浏览器！但这必须遵循：***.com/questions/49903552/… 结合您的回答。

【参考方案2】：

不，这是不可能的。这实际上不是 Angular 问题：伪元素不是 DOM 树的一部分，因此不会暴露任何可用于与它们交互的 DOM API。

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

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

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

【讨论】：

我需要为帖子列表动态设置background-image，所以它不会这样工作，而是我将设置div.blurbackground并在:before中继承它，谢谢寻找答案。

你不能用javascript设置伪元素的样式。因此，在这种情况下，您可以使用真实元素并设置它的背景。假装它是伪的。

【参考方案3】：

如果你想添加其他属性，我是这样做的：

<div class="progress" [style]= "'--porcentaje-width:' + widthh " ></div>

和css：

.progress::after 
  content: '';
  width: var(--porcentaje-width);

这对我有用:)

【参考方案4】：

在当前版本的 Angular 2+ 中，您可以使用 CSS 变量来实现此目的以及清理您的输入。

在您的样式表中使用 CSS 变量定义规则。回退也可以定义为 IE 不支持的 CSS 变量。 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

.featured-image:after  
    content: '';
    // Fallback for IE
    background-image: url('fallback-img.png');
    background-image: var(--featured-image); 

除了绕过安全信任样式，您还可以使用可重复使用的管道清理您的输入： https://angular.io/api/platform-browser/DomSanitizer#sanitize

import Pipe, PipeTransform, SecurityContext from '@angular/core';
import DomSanitizer, SafeStyle from '@angular/platform-browser';
@Pipe(
    name: 'safeStyle',
)
export class SafeStylePipe implements PipeTransform 
    constructor(protected sanitizer: DomSanitizer) 
    transform(value: string): SafeStyle 
        if (!value) return '';

        return this.sanitizer.sanitize(SecurityContext.STYLE, value);
    

在您的模板中：

<div class="featured-image" [style.--featured-image]="featuredImage[i] | safeStyle"></div>