如何使用 jQuery 检测 CSS 变化，特别是高度变化？

如何使用 JQuery 检测 CSS 更改

JQuery 没有用于检测 CSS 属性更改的内置事件。但是，您可以使用以下方法创建自己的方法：

连续 DOM 监控（第一种方法）：

定期轮询 DOM（例如，每 500 毫秒）以将当前 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);
}

checkForChanges();</code>

手动事件触发（第二种方式）：

将自定义事件处理程序绑定到目标元素，然后在更改元素的 CSS 时手动触发此事件。

示例：

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

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

具体确定高度变化（初始问题的解决方案）：

在检测 #mainContent div 高度变化的特定情况下，使用第二种方法并使用以下代码：

<code class="javascript">$('#mainContent').bind('heightChange', function () {
    $("#separator").css('height', $("#mainContent").height());
});</code>

记住在对 #mainContent div 进行任何高度更改之前绑定事件处理程序。

以上是如何使用 jQuery 检测 CSS 变化，特别是高度变化？的详细内容。更多信息请关注PHP中文网其他相关文章！