Question

我有一个跨度层次结构来定义不同的注释层：

<span class="eventRel" id="e12-e32">
    <span class="event">
        <span class="hl" id="moh">
            soluzione
            <span style="width:500px;">
                tokenid: 11
            </span>
        </span>
    </span>
</span>

然后我有不同的控制器，突出显示具有不同颜色的background属性（在本例中为soluzione）的标记。

所以，我的代码正常工作，就在我在class =“hl”上方有一个span层时。

有些情况下，超过3级跨度=“hl”。

我要强调的是：

document.getElementById('e12-e32').style.backgroundColor='white';

这只是为了以下情况：

<span class="event">
    <span class="hl" id="moh">
        soluzione
        <span style="width:500px;">
            tokenid: 11
        </span>
    </span>
</span>

在这方面提供帮助！，提前谢谢。

所以我需要应用这种风格来突出显示soluzione这个词：

  <span class="eventRel" id="e12-e32" style="background-color:yellow;">
    <span class="event">
        <span class="hl" id="moh">
            soluzione
            <span style="width:500px;">
                tokenid: 11
            </span>
        </span>
    </span>
</span>

Answer 1

我不知道我是否正确理解了您的问题，但选择了您可以使用的所有后代：

  document.querySelectorAll(".e12-e32")

Answer 2

我应用了内联样式，我认为以下代码可能会有所帮助..

    <span class="event">
    <span class="hl"  style="background-color:yellow;">
        soluzione
        <span style="width:500px;background-color:red;">
            tokenid: 11
        </span>
    </span>
</span>

Answer 3

在这里我写下发生的事情，我试图突出显示单词soluzione，如果该单词参与（注释图层是一个跨度），那么解决方案是，给每个（注释图层=跨度）一个类名，并在类名上应用样式，所以我错误的实现是我使用id来识别span，然后我在id上有重复。

所以，首先当你发现某些风格无法正常工作时，在更改它时，请检查ID是否有重复。因为会有任何错误通知，并且更改将仅适用于具有该ID的第一个元素！

跨度外部背景控制的层次结构

3 个答案: