0

要素の表示プロパティが変更されたことを検出しようとしています。最初、要素には表示プロパティがありません。要素が変更されたときにアラートを出したい。次のコードを試しましたが、何も警告されません。

document.getElementById('xxx').addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    if (e.newValue === 'block') {
      alert('test!');
    }
  }
}, false);

setTimeout(function () {
  var xxx = document.getElementById('xxx');
  xxx.style.display = 'block';
  console.log(xxx);
}, 5000);
4

1 に答える 1

0

これは、ミューテーションオブザーバーの使用方法を示す実際的な例です。私はWebKitプレフィックス付きのMutationObserver実装を使用しましたが、とにかくChromeを使用しているとおっしゃっていたので、少なくともこれをテストし、必要に応じてニーズに合わせることができます。

まず、を作成MutationObserverし、コールバックを提供します。このコールバックは、インスタンスの配列MutationRecordと2番目のインスタンスMutationObserver（呼び出されるコールバックの原因となったもの）の2つのパラメーターを使用して呼び出されます。これは、単一のコールバックを複数のMutationObserverにアタッチする場合に役立ちます。MutationRecordごとに1回呼び出されるのではなく、MutationRecordの配列を受け取ることに注意してください。これにより、パフォーマンスを向上させるために必要だったそれらをバンドルすることができます。

var observer = new WebKitMutationObserver(function(mutations) {
  console.log(mutations);
});

次に、（オプションの）configオブジェクトを作成して、関心のあるミューテーションのタイプを指定します。この場合、属性のミューテーションです。

var config = { attributes: true };

ここでは単純なオブジェクトとして定義していますが、これは実際にはMutationObserverInitオブジェクトとして使用されることに注意してください。

最後に、オブザーバーにノードを監視するように指示します。

observer.observe(document.getElementById('xxx'), config);

興味のある方のために、私はあなたの例をjsFiddleデモに適合させました。

于 2013-01-14T03:05:04.823 に答える