当前位置: 首页 > 面试题库 >

更改angular2中伪元素的样式

郑承恩
2023-03-14
问题内容

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

为了使div上的模糊效果像叠加层一样,我应该在伪元素上设置背景图像。

我尝试了类似的东西

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

它没有用。我也试过了

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

问题答案:

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

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

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

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



 类似资料:
  • 问题内容: 是否可以通过JavaScript更改CSS伪元素样式? 例如,我想像这样动态设置滚动条的颜色: 而且我还希望能够告诉滚动条这样隐藏: 但是,这两个脚本都返回: 未捕获的TypeError:无法读取null的属性“样式” 还有其他解决方法吗?跨浏览器的互操作性并不重要,我只需要它在Webkit浏览器中即可工作。 问题答案: 编辑 : 从技术上讲,有一种通过JavaScript直接更改CS

  • 主要思想是,我正在寻找将SVG添加到伪元素的最佳方法,该伪元素仍然保持其颜色变化(用于悬停)。所有这些最好没有HTML,而绝对不是JS。我正在寻找一个更简单的插件类,这是他们那种只使用CSS的解决方案。 我在这里读到了一篇讨论:有没有办法在伪元素::before或::after中使用SVG作为内容 在这里,人们主要谈论的是将其添加为这样的内容: 内容:url(数据:图像/svg xml,xml版本

  • 问题内容: 我有一个:before开头的’quote’和一个:after结束的报价。 现在,我想要的是一个:after:after供“引用”参考,但我无法使其正常工作。 有人知道这是否可能吗? 到目前为止,我的代码: 问题答案: 已经提出了嵌套和伪元素的想法;请参阅“生成和替换的内容”模块的这一部分。但是,该模块已被放弃,等待完全重写,因此在重新发布该文档之前,我不会屏息。即便如此,嵌套内容伪元素

  • 问题内容: 我正在构建React组件。正如React背后的一位专家在本次精彩的演讲中所建议的那样,我已经在组件中添加了CSS内联。我一直在努力寻找一种方法来内联添加CSS伪类,就像在演示文稿中名为“ :: after”的幻灯片上一样。不幸的是,我不仅需要添加该属性,还需要添加该属性。幻灯片显示了如何通过添加内容,但是如何添加其他属性? 问题答案: 得到了@Vjeux在React团队的回复: 普通H

  • 你好,堆栈溢出,目前正在处理一个需要拖动元素的任务;不是本机API所做的图像拖动,而是拖动实际的元素。元素应该显示一个要删除的位置框,并在将其拖过一个区域时更改其自身的内部内容,该区域将在删除时删除该元素。到目前为止,我发现了这个有用的指令,帮助我做到这一点https://xieziyu.github.io/angular2-draggable/#/usage/basic 问题是,一旦元素通过某个

  • 主要内容:1. ::after,2. ::before,3. ::first-letter,4. ::first-line,5. ::selection,6. ::placeholder伪元素是一个附加在选择器末尾的关键词,通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式,或者在元素之前、之后插入一些内容等等。 在 CSS1 和 CSS2 中,伪元素的使用与伪类相同,都是使一个冒号 与选择器相连。但在 C