jQuery で Div Height または CSS 属性の変更を検出するにはどうすればよいですか?

jQuery での Div Height または CSS 属性の変更の検出

CSS 変更時のイベントのトリガー

jQuery にはネイティブに特定のイベントがありません高さの変更を含む CSS 属性変更のハンドラー。ただし、この問題に対処するには 2 つのアプローチがあります。

アプローチ 1: DOM 要素の監視

事前定義された間隔 (例: 500 ミリ秒) で DOM 要素の 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);
}</code>

アプローチ 2: カスタム イベントのトリガー

カスタム イベント ハンドラー (この例では「heightChange」) を要素にバインドします。 CSS を変更するたびにイベントをトリガーします。

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


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

CSS の変更を制御できる場合は、より効率的で洗練された 2 番目のアプローチをお勧めします。

ドキュメント:

• bind: イベント ハンドラーを要素にアタッチします。
• trigger: 指定されたイベント タイプのすべてのイベント ハンドラーを実行します。

注:

CSS 変更の追跡を可能にする古い DOMAttrModified 変異イベントがありましたが、現在は推奨されていません。

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