動的に追加された要素にCSSスタイルが適用されるタイミング

Question

私が取り組んでいるウェブページでは、1行と2つのセルを持つ単純なHTMLテーブルがあります。これらは、ページ全体に

<table> 
    <tr> 
    <td id="svg-cell"> 
     <div id="svg-container"> 
     <!-- the svg is going to go in here --> 
     </div> 
     <!-- a hidden 
      <div id="block-svg"><div> 
      will be inserted here in the JS code to prevent further user interaction 
      on the svg until the user does something else on the page 
     --> 
    </td> 
    <td> 
     <!-- some other not relevant stuff goes in here--> 
    </td> 
</tr> 
</table> 

を占め、左側のセルは、それにSVGを持つことになり、ユーザーは、私は透明グレーのオーバーレイでセル全体をカバーし、それとの相互作用をブロックしたいSVGをクリックしたときSVGが右のセルで別のものを選択するまでJavaScriptの下に使用：

let blockSVG = document.createElement('div') 
blockSVG.id = "block-svg" 
blockSVG.innerHTML = "Please select an item on the right" 

document.getElementById("svg-cell").appendChild(blockSVG) 

そして私は、この対応するCSSを持っている：予想通り

div#block-svg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    text-align: center; 
} 

今、このすべては時々SVGが非常に大きい除き、偉大取り組んでいます。それはページにあるよりも多くのスペースを占めることがあります。そして、ブラウザのコンソールで私のdivが正しくページに追加され、実際にそのIDとして "block-svg"を持っているのを見ることができます。灰色のオーバーレイでdivをカバーしても効果がないようです。私がページの周りをスクロールすると、CSSが有効になります。私の最高の推測は、ブラウザが何とか私のdiv#block-svgが見えないと判断したので、それを計算すること/それにCSSを適用することを邪魔しないということです。

ご意見をいただければ幸いです。

このcssが他のCSSと何らかの形で衝突している可能性は間違いありません。

Answer 1

問題を再現できません。しかし、私は擬似要素を使って同じオーバーレイ技法を行うことができ、JSはオーバーレイを有効または無効にするクラスを追加/削除することができると思います。

document.getElementById('svg-cell').classList.add('overlay');

#svg-cell { 
 
    position: relative; 
 
} 
 
.overlay:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    text-align: center; 
 
    content: 'Please select an item on the right'; 
 
}

<table> 
 
    <tr> 
 
    <td id="svg-cell"> 
 
     <div id="svg-container"> 
 
     <svg width="100" height="100"> 
 
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
 
     </svg> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>