如何在 jQuery 中检测 Div 高度或 CSS 属性的变化？

在 jQuery 中检测 Div 高度或 CSS 属性更改

在 CSS 更改时触发事件

jQuery 本身缺乏特定事件CSS 属性更改的处理程序，包括高度修改。但是，有两种方法可以解决此问题：

方法 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'); //<p>如果您可以控制 CSS 更改，建议使用第二种方法，因为它更高效、更优雅。</p>
<p><strong>文档：</strong></p>
<ul>
<li>绑定：将事件处理程序附加到元素。</li>
<li>触发：执行指定事件类型的所有事件处理程序。</li>
</ul>
<p><strong>注意：</strong></p>
<p>有一个过时的 DOMAttrModified 突变事件，允许跟踪 CSS 更改，但不再推荐。</p></code>

以上是如何在 jQuery 中检测 Div 高度或 CSS 属性的变化？的详细内容。更多信息请关注PHP中文网其他相关文章！