29

style要素には、 CSS スタイルのさまざまな名前と値を含むJavaScriptオブジェクトがあります。polling を使用せずに、このオブジェクトが変更されるたびに関数をトリガーしたいと思います。ブラウザ間の互換性があり、サードパーティのコードで確実に動作する方法でこれを行う方法はありますか (ドロップイン スクリプトを提供しているとしましょう)。DOMAttrModifiedまたはのような JavaScript イベントをバインドしてDOMSubtreeModifiedも、Chrome では機能しないため、十分ではありません。

4

6 に答える 6

56

編集4：ライブデモ

$(function() {
  $('#toggleColor').on('click', function() {
    $(this).toggleClass('darkblue');
  }).attrchange({
    trackValues: true,
    callback: function(event) {
      $(this).html("<ul><li><span>Attribute Name: </span>" + event.attributeName + "</li><li><span>Old Value: </span>" + event.oldValue + "</li><li><span>New Value: </span>" + event.newValue + "</li></ul>");
    }
  });
});
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}
#toggleColor {
  height: 70px;
  width: 300px;
  padding: 5px;
  border: 1px solid #c2c2c2;
  background-color: #DBEAF9;
}
#toggleColor span {
  font-weight: bold;
}
#toggleColor.darkblue {
  background-color: #1A9ADA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://meetselva.github.io/attrchange/javascripts/attrchange.js"></script>
<p>Click below div to toggle class darkblue.</p>
<div id="toggleColor"></div>

編集3：gitattrchangeからダウンロードできるプラグインとしてこれらすべてをまとめました。これがデモページです。

編集2：

  1. IE7およびIE8のpropertNameの修正

編集1：

  1. 複数の要素を処理する
  2. 実装を改善するために、条件をMutationObserver、DOMAttrModified、およびonpropertychangeとして注文しました。
  3. 変更された属性名をコールバックに追加しました。

フィードバックを寄せてくれた@benvieに感謝します。

デモ： http： //jsfiddle.net/zFVyv/10/（FF 12、Chrome 19、IE 7でテスト済み）

$(function() {
    (function($) {
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

        function isDOMAttrModifiedSupported() {
            var p = document.createElement('p');
            var flag = false;

            if (p.addEventListener) p.addEventListener('DOMAttrModified', function() {
                flag = true
            }, false);
            else if (p.attachEvent) p.attachEvent('onDOMAttrModified', function() {
                flag = true
            });
            else return false;

            p.setAttribute('id', 'target');

            return flag;
        }

        $.fn.attrchange = function(callback) {
            if (MutationObserver) {
                var options = {
                    subtree: false,
                    attributes: true
                };

                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(e) {
                        callback.call(e.target, e.attributeName);
                    });
                });

                return this.each(function() {
                    observer.observe(this, options);
                });

            } else if (isDOMAttrModifiedSupported()) {
                return this.on('DOMAttrModified', function(e) {
                    callback.call(this, e.attrName);
                });
            } else if ('onpropertychange' in document.body) {
                return this.on('propertychange', function(e) {
                    callback.call(this, window.event.propertyName);
                });
            }
        }
    })(jQuery);

    $('.test').attrchange(function(attrName) {
        alert('Attribute: ' + attrName + ' modified ');
    }).css('height', 100);

});

参照：

  1. DOMAttrModifiedがサポートされているかどうかを検出します
  2. Chrome用のDOMAttrModified
  3. ミューテーションオブザーバー
  4. ミューテーションイベントの使用を避ける必要があるのはなぜですか？
  5. onPropertyChange IE

Mutation Observersは、DOM4のミューテーションイベントの代替案です。これらはFirefox14とChrome18に含まれる予定です。

ブラウザのサポート：

onpropertychange-IEでサポートされています（IE 7でテスト済み）

DOMAttrModified -IE 9、FF、Operaでサポートされています

MutationObservers -非常に新しく、Chrome18で正常に機能しました。それがどこまでサポートされているかわからないが、Safariでまだテストされていない。

WebkitMutationObserverに関する情報を追加してくれた@benvieに感謝します

于 2012-06-12T21:09:39.237 に答える
1

まさにそれを行うこの小さなプラグインを見つけました。変更して、必要な変異を追加できます... scrollHeight変更リスナーでさえ。

プラグイン: http://www.jqui.net/jquery-projects/jquery-mutate-official/

ここにデモがあります： http://www.jqui.net/demo/mutate/

于 2012-09-20T09:07:59.640 に答える
1

EDIT2：

それでも を使用したい場合はmutation observer、このライブラリを使用してください: Mutation-summary

編集：

object.watch以下の私の回答で述べたように、Vega のコメントに感謝しmutation observersます。これはMDNからの実際の引用です:

一般に、可能な場合はwatch()andを使用しないでくださいunwatch()。これら 2 つのメソッドは Gecko でのみ実装されており、主にデバッグでの使用を目的としています。さらに、ウォッチポイントを使用 すると、パフォーマンスに深刻な悪影響を及ぼします。これは、ウィンドウなどのグローバル オブジェクトで使用する場合に特に当てはまります。通常、代わりにセッターとゲッターまたはプロキシを使用でき ます。詳細については、互換性を参照してください。

警告

したがって、クロスブラウザーの互換性がチェックリストに含まれている場合は、繰り返しますが、オブジェクトの と をオーバーライドすることを強くお勧めしsetterます。 getterstyle

object.watchクロスブラウザー ソリューションでは、次のことを念頭に置いて 使用します。

要素のオブジェクトgetterのメソッドもオーバーライドできます。setterstyle

これに利用できる jQuery プラグイン、jQuery ウォッチがあります。

于 2012-06-13T08:38:30.403 に答える
0

最新のすべてのブラウザーでさえ、これを実現するためのクロスブラウザーの方法はありません。イベントリスナーをトリガーできる関数を介して、すべての css スタイルの変更をルーティングする必要があります。これが最もクリーンな方法です。

于 2012-06-03T05:26:36.143 に答える
0

同様の質問への回答では、スタイル設定の操作が標準インターフェース (つまり、常にjQuery などを使用) を介して実行されることがわかっている場合は、ライブラリ メソッドが呼び出されるたびにカスタム イベントが発生することが提案されています。

これにより、より広範なサポート マトリックスが可能になりますが、ライブラリ メソッドを使用せずに実行した場合、プロパティの変更は無視されます。また、ネイティブ セッターは常に信頼できるとは限らないため、このようなアプローチはネイティブ セッターには適用できないようです。

于 2012-06-14T05:53:59.670 に答える
0

attrchange jQuery プラグインを使用できます。プラグインの主な機能は、HTML 要素の属性変更時にリスナー関数をバインドすることです。

于 2013-10-20T12:29:49.597 に答える