css - Javascript - Detect when the style changes are reflected? -

i have browser extension takes screenshot of visible page (using browser's api).

the user initiate process custom context menu, injected webpages.

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 appearance of menu in screenshot     menu.style.display = "none";     capture(); }, false); 

the problem menu still visible in screen capture. there way detect when style changes reflected ?

thanks.

i solved attaching listener parent element (dunno why works though)

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 appearance of menu in screenshot     menu.style.display = "none";     capture(); }, false);