我有和角度应用程序,作为其中的一部分,我在div(ID为JSONContainer)中显示查询结果。
我想突出显示结果中的特定查询,所以我使用了一个搜索结果的管道,并将文本中的field:Value替换为:
FIELD:VALUE.
我向组件添加了以下css:
div#JSONContainer span.highlightSpan{
background-color: rgba(28, 243, 28, 0.5) !important;
color:red !important;
padding: 1px;
margin:1px;
}
我也尝试在.Highlight tSpan下添加相同的样式,结果相同。
我使用存储整个JSON的‘data’变量和存储查询的‘Query’变量,通过innerHTML在包含组件中插入此范围和文本的其余部分:
(我不使用字符串插补,因为数据变量是json形状的,我使用html代码(如html br标记)设置了它的样式,而字符串插补仅显示文本)。
当我将鼠标指向Google dev工具中的相关范围时,我看到包含类的范围已创建:
但没有应用css样式,甚至没有在Google dev工具中显示:
编辑:我知道它没有显示(我已将其从img中删除),但如所述,范围位于div#JSONContainr中。
编辑2: 以下是相关的树:
为什么会发生这种情况?
如何应用CSS样式?
谢谢!
发生这种情况是因为您正在动态添加span
元素,而它不是组件的一部分,因此span
元素没有使用组件样式隔离进行装饰。当您浏览呈现为html组件时,您会看到每个元素都有类似_ngcontent-c2
的属性,但您的范围没有,因此它不是组件样式的一部分。
您可以将您的css更改为:
::ng-deep div#JSONContainer span.highlightSpan
样式化组件的后代(动态添加的其他组件或元素)。或者,您可以将样式添加到全局样式中,这样它就不会成为该组件隔离的一部分。
我已创建stackblitz demo来模拟您的情况。
您可以阅读有关angular view encapsulation的更多信息。
这篇关于Span通过innerHTML输入时不应用css样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持吉威生活!
[英文标题]span doesn't apply css style when entered via innerHTML
声明:本媒体部分图片、文章来源于网络,版权归原作者所有,如有侵权,请联系QQ:330946442删除。