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のクラスやスタイル属性の変更を監視します。
   これを行う場合は、Google のMutation Summaryライブラリを使用することをお勧めします。このアプローチの詳細については、新しい質問をしてください。

---

セキュリティ上の理由から、javascript はすべてのスタイル変更を検出できるわけではないことに注意してください。たとえば、スクリプトは訪問したリンクの色を取得できません。