Question

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

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

改变是风格。 display:none;有时会更改为display:block;。

如何通过javascript监控？

Answer 1

有一个类似的问题here和here。他们将向您展示如何修改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;}');

但是，如果你真的想要监控变化，可以选择以下几种方法：

轮询更改。这是最简单，最稳健的方法例如（不需要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);

连接到正在进行更改的目标页面的javascript（如果有的话）例如，如果目标页面使用javascript函数display (elem)来显示该节点，那么您可以经常 inject代码类似于：
```
var _old_display    = display;
var display         = function (elem) {
    // DO SOMETHING
    _old_display (elem);    // Optional, depending on your goals.
    // DO SOMETHING MORE
};
```
使用全新的MutationObservers来监控元素，以便更改其类和/或样式属性。
如果您打算这样做，最好通过Google's Mutation Summary library来完成。提出一个新问题，了解有关此方法的更多信息。

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

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

2 个答案: