jQuery を使用して DIV 高さまたは CSS 属性の変更を検出するにはどうすればよいですか?

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

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

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

「change()」イベントは主に入力要素に使用されます。 、CSS の変更を検出するようにカスタマイズできます。ただし、このアプローチには、要素の 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>

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

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

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


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

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

注:

• 「checkForChanges()」関数のチェックの頻度は、特定の状況に合わせて調整できます。
• 「bind()」メソッドと「trigger()」メソッドについては、jQuery のドキュメントに詳細に記載されています。

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