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>

何时/如何为动态添加的元素应用css样式？

1 个答案: