何時/如何將CSS樣式應用於動態添加的元素？

Question

在我正在處理的網頁上，我有一行和兩個單元格的簡單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已正確添加到頁面，並確實具有「block-svg」作爲其ID .. CSS用灰色覆蓋覆蓋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>