javascript - 使用 javascript 监控标签的样式更改？

Question

我希望我的用户脚本监视此标签的更改：

<div id="moni" style="text-align: center; width: 773px; display: none; ">Offline</div>

变化在于风格。display:none;有时更改为display:block;.

如何通过 javascript 进行监控？

Answer 1

这里和这里有一个类似的问题。他们将向您展示如何修改 jQuery 本身以获得您想要的。

如果你只想投票，你可以使用这个：

function foo(){
    $('#moni').each(function(){
        if($(this).is(':visible')){
            //do something
        }
    });
} //foo()
window.setInterval(foo, 100);

根据您的情况将修改100为合理的毫秒数。

Answer 2

您的真正目标是让该 div 不显示吗？
如果是这样，那么只需在脚本中使用 CSS，如下所示：

GM_addStyle ('#moni {display: none !important;}');

---

但是，如果你真的想监控变化，这里有一些选择：

1. 轮询更改。这是最简单、最可靠的方法。
   例如（不需要 jQuery）：

   function checkForMoniDisplayChange () {
       this.lastDisp   = this.lastDisp  ||  "";
       var moniDiv     = document.getElementById ("moni")
       var moniDisp    = window.getComputedStyle (moniDiv).getPropertyValue ("display");
   
       if (moniDisp != this.lastDisp) {
           // DO SOMETHING
           //console.log (moniDisp);
       }
       this.lastDisp   = moniDisp;
   }
   
   //--- 150 is a good compromise between UI response and browser load.
   window.setInterval (checkForMoniDisplayChange, 150);
   

   
   

2. 挂钩到正在进行更改的目标页面的 javascript（如果有）。
   例如，如果目标页面使用 javascript 函数display (elem)来显示该节点，那么您通常可以 注入类似于以下内容的代码：

   var _old_display    = display;
   var display         = function (elem) {
       // DO SOMETHING
       _old_display (elem);    // Optional, depending on your goals.
       // DO SOMETHING MORE
   };
   

   
   

3. 使用全新MutationObserver的 s来监视元素的类和/或样式属性的更改。
   如果您打算这样做，最好通过Google 的Mutation Summary库来完成。询问一个新问题以获取有关此方法的更多信息。

---

请注意，出于安全原因，javascript 无法检测到每个样式更改。例如，您的脚本将无法获取已访问链接的颜色。