ホームページ >ウェブフロントエンド >CSSチュートリアル >jQuery で Div Height または CSS 属性の変更を検出するにはどうすればよいですか?
CSS 変更時のイベントのトリガー
jQuery にはネイティブに特定のイベントがありません高さの変更を含む CSS 属性変更のハンドラー。ただし、この問題に対処するには 2 つのアプローチがあります。
事前定義された間隔 (例: 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>
カスタム イベント ハンドラー (この例では「heightChange」) を要素にバインドします。 CSS を変更するたびにイベントをトリガーします。
<code class="javascript">$('#mainContent').bind('heightChange', function(){ alert('xxx'); }); $("#btnSample1").click(function() { $("#mainContent").css('height', '400px'); $("#mainContent").trigger('heightChange'); //<==== ... }); </code>
CSS の変更を制御できる場合は、より効率的で洗練された 2 番目のアプローチをお勧めします。
ドキュメント:
注:
CSS 変更の追跡を可能にする古い DOMAttrModified 変異イベントがありましたが、現在は推奨されていません。
以上がjQuery で Div Height または CSS 属性の変更を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。