Javascript-检测何时反映样式更改？

我有一个浏览器扩展，可以截取可见页面的屏幕截图（使用浏览器的API）

用户通过一个自定义上下文菜单（插入网页）启动该过程

wrapper.addEventListener("contextmenu", function(e) {
    //prevent default context menu
    e.preventDefault();
    menu.style.display = "block";
});

menu.addEventListener("click", function click(e) {
    e.preventDefault();
    e.stopPropagation();
    //prevent the appearance of the menu in the screenshot
    menu.style.display = "none";
    capture();
}, false);

问题是菜单在屏幕截图中仍然可见。是否有一种方法可以检测样式更改何时反映出来

---

谢谢。

我通过在父元素上附加一个额外的侦听器解决了这个问题（但不知道为什么它会工作）

---

最有可能的做法是将对

capture

的调用放入

setTimeout

中并适当延迟，这样就可以了。

为什么不使用打印样式表，只需显示：无相关元素？我隐藏的元素是上下文菜单本身，我通过代码将其更改为可见/隐藏，因为如果它已经隐藏，用户还可以单击它。（也就是说，我只在用户点击时才隐藏它）或的可能副本？它不一样。对元素样式的更改应用得很好，我只想知道它何时完成。例如（）注意，在截图时元素是可见的。但几毫秒后，它将被正常隐藏。

wrapper.addEventListener("contextmenu", function(e) {
    //prevent default context menu
    e.preventDefault();
    menu.style.display = "block";
});

wrapper.addEventListener("mousedown", function(e) {
    //can't use "display: none" before mouseup
    menu.style.opacity = 0;
}, false);

menu.addEventListener("click", function click(e) {
    e.preventDefault();
    e.stopPropagation();
    //prevent the appearance of the menu in the screenshot
    menu.style.display = "none";
    capture();
}, false);