防止包含范围

Question

TD; DR

我正在我的应用程序中集成JS文本编辑器。它允许对来自各个起草人的文本进行修改（为了好奇，它是纽约时报的Track Changes插件，适用于CkEditor）。

作为一个前提，为了简单起见，它有两个主要的CSS类，ice-ins（用于插入文本）和ice-del（用于删除文本）。 ice-ins提供绿色文字颜色，ice-del提供红色文字颜色和line-through;它们都在span s上运行。

由于某些原因，（写入期间）两个类可能重叠（它们都与新创建的跨度相关联），并且我（作为变通方法......）让ice-ins另一方面“赢”。我确实喜欢这个：

if (node.className.indexOf("ice-del") != -1){
    console.log("I am writing as ice-del, which is wrong...");
    if (node.className.indexOf("ice-ins") != -1){
        console.log("Both ice-ins and ice-del are present: I delete ice-del");
        node.className = node.className.replace("ice-del", "");
        //I also want to remove the inherited line-through: DOESN'T WORK!
        node.style.textDecoration = "none";         
    }else{
        console.log("I just have ice-del class: I change it into ice-ins");
        node.className = node.className.replace("ice-del", "ice-ins");
        //I also want to remove the inherited line-through: DOESN'T WORK!
        node.style.textDecoration = "none";
    }
}

班级替换效果很好;顺便说一下，我无法“覆盖”line-trough到none，因为text-decoration由包含span继承。结果，文本被插入为绿色（这是正确的）但是被打击（作为ice-del，这是错误的）。显然我的node.style.textDecoration = "none";没有效果。

/ TL; DR

那么，如何通过JS从容器line-through中“{覆盖”none到span？ 你能告诉我一个克服它的方法吗？

示例：

问题的实际表示如下。考虑图像中的红色平方内容：

相应的HTML是：

<span class="ice-del ice-cts-1" data-cid="3" data-userid="utenzatecnica" data-username="utenzatecnica utenzatecnica" data-changedata="" data-time="1527492696670" title="Changed by utenzatecnica utenzatecnica 2 minutes ago">
    <span class="ice-ins  ice-cts-1" data-cid="3" data-userid="utenzatecnica" data-username="utenzatecnica utenzatecnica" data-changedata="" data-time="1527492696670" title="Changed by utenzatecnica utenzatecnica 2 minutes ago" style="text-decoration: none;">s</span>
    <span class="ice-ins  ice-cts-1" data-cid="3" data-userid="utenzatecnica" data-username="utenzatecnica utenzatecnica" data-changedata="" data-time="1527492696670" title="Changed by utenzatecnica utenzatecnica 2 minutes ago" style="text-decoration: none;">d</span>
    <span class="ice-ins  ice-cts-1" data-cid="3" data-userid="utenzatecnica" data-username="utenzatecnica utenzatecnica" data-changedata="" data-time="1527492696670" title="Changed by utenzatecnica utenzatecnica 2 minutes ago" style="text-decoration: none;">s</span>
    <span class="ice-ins  ice-cts-1" data-cid="3" data-userid="utenzatecnica" data-username="utenzatecnica utenzatecnica" data-changedata="" data-time="1527492696670" title="Changed by utenzatecnica utenzatecnica 2 minutes ago" style="text-decoration: none;">d</span>
    <span class="ice-ins  ice-cts-1" data-cid="3" data-userid="utenzatecnica" data-username="utenzatecnica utenzatecnica" data-changedata="" data-time="1527492696670" title="Changed by utenzatecnica utenzatecnica 2 minutes ago" style="text-decoration: none;">s</span>
INSEITO</span>

如您所见，每个新插入的字母（s，d，s，d，s）都插入为ice-ins（因此，它们是绿色的），但text-decoration:none不会不起作用，因为他们进入了ice-del的封闭范围，有line-through。

编辑（和替代解决方案）：

我最终的另一个技巧是将子span元素移到其父元素之外：

node.parentNode.before(node);

因此它将不再继承文本装饰。

Answer 1

我不知道为什么text-decoration: none;没有重置直通，但你可以使用display: inline-block;：

＆＃13;

＆＃13;

<style>
.blep {
  display: inline-block
}
.strike {
  text-decoration: line-through;
}
</style>
<span class="strike">aaa<span class="blep">bbbbb</span>aaa</span>

＆＃13;

＆＃13;

＆＃13;