bugfix> html > 投稿

TD;DR

アプリケーションにJSテキストエディターを統合しています。さまざまな起草者からのテキストに改訂を適用することができます(好奇心のため、CkEditorのThe New York TimesのTrack Changesプラグインです)。

前提として、そして簡単にするために、2つの主要なCSSクラス、 ice-ins があります。(挿入されたテキスト用)および ice-del (削除されたテキストの場合)。 ice-ins 緑のテキスト色 ice-del を提供します赤いテキスト色と line-through を提供します ;両方とも span で動作します s。

いくつかの理由で、(書き込み中に)2つのクラスが重複する可能性があり(両方とも新しく作成されたスパンに関連付けられます)、私は(回避策として) 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

だから、どうすれば line-through を「上書き」できますか none へ 、コンテナ span から継承 、JSを通して? 私にそれを克服する方法を提案できますか?

例:

問題の実際の表現は次のとおりです。画像内の赤の四角のコンテンツを考慮してください。

対応する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 があります 。

編集(および代替ソリューション):

最後に、もう1つのトリックは、子span要素をその親の外側に移動することです。

node.parentNode.before(node);

したがって、テキスト装飾を継承しなくなります。

回答 1 件
  • なぜ text-decoration: none; かわからない  ラインスルーはリセットされませんが、 display: inline-block; を使用できます  :

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

あなたの答え