jQuery を使用して CSS の変更、特に高さの変更を検出するにはどうすればよいですか?

JQuery を使用して CSS の変更を検出する方法

JQuery には、CSS 属性の変更を検出するための組み込みイベントがありません。ただし、次のアプローチを使用して独自のモニタリングを作成することもできます。

継続的な DOM モニタリング (最初の方法):

DOM を定期的に (たとえば、500 ミリ秒ごとに) ポーリングして、現在の CSS 属性値を以前の値と比較します。異なる場合は、イベントをトリガーします。

例:

<code class="javascript">var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');

function checkForChanges() {
    if ($element.css('height') != lastHeight) {
        alert('xxx');
        lastHeight = $element.css('height');
    }
    setTimeout(checkForChanges, 500);
}

checkForChanges();</code>

手動イベント トリガー (2 番目の方法):

カスタム イベント ハンドラーをターゲット要素にバインドし、要素の CSS を変更するたびにこのイベントを手動でトリガーします。

例:

<code class="javascript">$('#mainContent').bind('heightChange', function(){
    alert('xxx');
});

$("#btnSample1").click(function() {
    $("#mainContent").css('height', '400px');
    $("#mainContent").trigger('heightChange');
});</code>

高さの変更を具体的に判断する (最初の問題の解決策):

#mainContent div の高さの変更を検出する特定のケースでは、次のコードで 2 番目のアプローチを使用します:

<code class="javascript">$('#mainContent').bind('heightChange', function () {
    $("#separator").css('height', $("#mainContent").height());
});</code>

#mainContent div の高さを変更する前に、必ずイベント ハンドラーをバインドしてください。

以上がjQuery を使用して CSS の変更、特に高さの変更を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。