style
要素には、 CSS スタイルのさまざまな名前と値を含むJavaScriptオブジェクトがあります。polling を使用せずに、このオブジェクトが変更されるたびに関数をトリガーしたいと思います。ブラウザ間の互換性があり、サードパーティのコードで確実に動作する方法でこれを行う方法はありますか (ドロップイン スクリプトを提供しているとしましょう)。DOMAttrModified
またはのような JavaScript イベントをバインドしてDOMSubtreeModified
も、Chrome では機能しないため、十分ではありません。
6 に答える
編集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:
- IE7およびIE8のpropertNameの修正
編集1:
- 複数の要素を処理する
- 実装を改善するために、条件をMutationObserver、DOMAttrModified、およびonpropertychangeとして注文しました。
- 変更された属性名をコールバックに追加しました。
フィードバックを寄せてくれた@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);
});
参照:
- DOMAttrModifiedがサポートされているかどうかを検出します
- Chrome用のDOMAttrModified
- ミューテーションオブザーバー
- ミューテーションイベントの使用を避ける必要があるのはなぜですか?
- onPropertyChange IE
Mutation Observersは、DOM4のミューテーションイベントの代替案です。これらはFirefox14とChrome18に含まれる予定です。
ブラウザのサポート:
onpropertychange
-IEでサポートされています(IE 7でテスト済み)
DOMAttrModified
-IE 9、FF、Operaでサポートされています
MutationObservers
-非常に新しく、Chrome18で正常に機能しました。それがどこまでサポートされているかわからないが、Safariでまだテストされていない。
WebkitMutationObserverに関する情報を追加してくれた@benvieに感謝します
まさにそれを行うこの小さなプラグインを見つけました。変更して、必要な変異を追加できます... scrollHeight変更リスナーでさえ。
プラグイン: http://www.jqui.net/jquery-projects/jquery-mutate-official/
ここにデモがあります: http://www.jqui.net/demo/mutate/
EDIT2:
それでも を使用したい場合はmutation observer
、このライブラリを使用してください: Mutation-summary
編集:
object.watch
以下の私の回答で述べたように、Vega のコメントに感謝しmutation observers
ます。これはMDNからの実際の引用です:
一般に、可能な場合は
watch()
andを使用しないでくださいunwatch()
。これら 2 つのメソッドは Gecko でのみ実装されており、主にデバッグでの使用を目的としています。さらに、ウォッチポイントを使用 すると、パフォーマンスに深刻な悪影響を及ぼします。これは、ウィンドウなどのグローバル オブジェクトで使用する場合に特に当てはまります。通常、代わりにセッターとゲッターまたはプロキシを使用でき ます。詳細については、互換性を参照してください。警告
したがって、クロスブラウザーの互換性がチェックリストに含まれている場合は、繰り返しますが、オブジェクトの と をオーバーライドすることを強くお勧めしsetter
ます。
getter
style
object.watch
クロスブラウザー ソリューションでは、次のことを念頭に置いて
使用します。
要素のオブジェクトgetter
のメソッドもオーバーライドできます。setter
style
これに利用できる jQuery プラグイン、jQuery ウォッチがあります。
最新のすべてのブラウザーでさえ、これを実現するためのクロスブラウザーの方法はありません。イベントリスナーをトリガーできる関数を介して、すべての css スタイルの変更をルーティングする必要があります。これが最もクリーンな方法です。
同様の質問への回答では、スタイル設定の操作が標準インターフェース (つまり、常にjQuery などを使用) を介して実行されることがわかっている場合は、ライブラリ メソッドが呼び出されるたびにカスタム イベントが発生することが提案されています。
これにより、より広範なサポート マトリックスが可能になりますが、ライブラリ メソッドを使用せずに実行した場合、プロパティの変更は無視されます。また、ネイティブ セッターは常に信頼できるとは限らないため、このようなアプローチはネイティブ セッターには適用できないようです。
attrchange jQuery プラグインを使用できます。プラグインの主な機能は、HTML 要素の属性変更時にリスナー関数をバインドすることです。