JQueryを使用してCSSプロパティが変更されたときにイベントを検出

要素の "display" cssプロパティが変更されたかどうかを検出する方法はありますか（何もないか、ブロックかインラインブロックか...）？そうでない場合、プラグインはありますか？ありがとう

注意

この投稿が作成されて以来、突然変異イベントは廃止されており、すべてのブラウザーでサポートされているわけではありません。代わりに、突然変異オブザーバーを使用してください。

はい、できます。DOM L2イベントモジュールは変更イベントを定義します。それらの1つ-DOMAttrModifiedは、必要なものです。確かに、これらは広く実装されていませんが、少なくともGeckoおよびOperaブラウザーでサポートされています。

これらの線に沿って何かを試してください：

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

の代わりにIEの「propertychange」イベントを利用することもできDOMAttrModifiedます。style変更を確実に検出できるようにする必要があります。

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

コードサンプル：

$("#myDiv").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "display") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/inline/i) == -1) {

                // your code to execute goes here...
            }
        }
    }
});

jQueryのcss関数を使用してCSSプロパティをテストできます。if ($('node').css('display') == 'block')。

Colinは正解です。特定のCSSプロパティが変更されたときに発生する明示的なイベントはありません。しかし、あなたはそれをひっくり返して、表示を設定するイベントなどをトリガーすることができるかもしれません。

また、CSSクラスを追加して、必要な動作を実現することも検討してください。多くの場合、包含要素にクラスを追加し、CSSを使用してすべての要素に影響を与えることができます。AJAX応答が保留中であることを示すために、クラスをbody要素にスラップすることがよくあります。次に、CSSセレクターを使用して必要な表示を取得できます。

これがあなたが探しているものかどうかわかりません。

CSSトランジションが影響を与えるプロパティの場合、transitionendイベントを使用できます（例：z-index）。

$(".observed-element").on("webkitTransitionEnd transitionend", function(e) {
  console.log("end", e);
  alert("z-index changed");
});

$(".changeButton").on("click", function() {
  console.log("click");
  document.querySelector(".observed-element").style.zIndex = (Math.random() * 1000) | 0;
});

.observed-element {
  transition: z-index 1ms;
  -webkit-transition: z-index 1ms;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changeButton">change z-index</button>
<div class="observed-element"></div>

できません。CSSは「イベント」をサポートしていません。何のためにそれを必要とするのでしょうか？SOのこちらの投稿をご覧ください。イベントをスタイル変更にフックしたい理由は考えられません。ここでは、スタイルの変更がJavaScriptによって他の場所でトリガーされていると想定しています。そこで追加のロジックを追加してみませんか？