DIV 高さまたは CSS 属性の変更の決定

Web ページを操作する場合、多くの場合、高さまたは他の CSS の変更を追跡する必要があります。要素の属性。 jQuery は、このニーズに対処するためのさまざまなオプションを提供しています。

'change()' によるイベント トラッキング:

'change()' イベントは主に入力要素に使用されます。 、CSS の変更を検出するようにカスタマイズできます。ただし、このアプローチでは、要素の CSS プロパティを定期的にチェックし、以前の値と異なる場合にイベントをトリガーする必要があります。

var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
    if ($element.css('height') != lastHeight)
    {
        alert('xxx');
        lastHeight = $element.css('height'); 
    }

    setTimeout(checkForChanges, 500);
}

「bind()」によるカスタム イベント バインディング:

より効率的な解決策には、カスタム イベントを作成し、それを目的の要素にバインドすることが含まれます:

$('#mainContent').bind('heightChange', function(){
        alert('xxx');
    });


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

この場合、'mainContent' div の高さが変更されるたびに、'heightChange' イベントをトリガーします。

注:

• 「checkForChanges()」関数のチェックの頻度は、特定の要件に合わせて調整できます。
• 「bind()」メソッドと「trigger()」メソッドについては、jQuery ドキュメントで詳しく説明されています。さらに参照。