wann/wie werden CSS-Stile für dynamisch hinzugefügte Elemente angewendet?

Question

Auf einer Webseite, an der ich arbeite, habe ich eine einfache HTML-Tabelle mit einer Zeile und zwei Zellen. Diese nehmen die gesamte Seite

<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> 

Die Zelle auf der linken Seite wird ein SVG in ihm haben, und wenn der Benutzer klickt auf der SVG ich die ganze Zelle nach oben mit einem transparenten grauen Overlay abdecken wollen und blockieren jede Interaktion mit dem SVG, bis sie etwas anderes in der rechten Zelle ausgewählt haben. Mit der unter 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) 

und dann habe ich diese entsprechende CSS:

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

jetzt all dies funktioniert groß wie erwartet, außer manchmal die SVG sehr groß ist. Es kann mehr Platz einnehmen als auf der Seite und wenn das passiert, obwohl ich in der Browser-Konsole sehen kann, dass mein div korrekt zur Seite hinzugefügt wurde und tatsächlich "block-svg" als ID hat .. das CSS welches deckt das Div mit einem grauen Overlay scheint nicht zu wirken. Wenn ich dann um die Seite scrolle, wird das CSS wirksam. Meine beste Vermutung ist, dass der Browser irgendwie festgestellt hat, dass meine div#block-svg nicht sichtbar ist und es daher die Berechnung/Anwendung der CSS nicht daran interessiert.

Alle Vorschläge würden sehr geschätzt werden.

Als eine Randnotiz gibt es definitiv keine Möglichkeit, dass diese CSS irgendwie mit einigen anderen CSS in Konflikt steht.

Answer 1

Ich kann Ihr Problem nicht reproduzieren. Ich denke jedoch, dass Sie die gleiche Überlagerungstechnik mit einem Pseudoelement durchführen können, und Ihr JS kann nur eine Klasse hinzufügen/entfernen, die das Overlay aktiviert oder deaktiviert.

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>