首页 >web前端 >css教程 >如何在 jQuery 中检测 Div 高度或 CSS 属性的变化?

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

Patricia Arquette
Patricia Arquette原创
2024-11-04 02:21:30820浏览

How to Detect Changes in Div Height or CSS Attributes in jQuery?

在 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'); //<====
    ...
});    </code>

如果您可以控制 CSS 更改,建议使用第二种方法,因为它更高效、更优雅。

文档:

  • 绑定:将事件处理程序附加到元素。
  • 触发:执行指定事件类型的所有事件处理程序。

注意:

有一个过时的 DOMAttrModified 突变事件,允许跟踪 CSS 更改,但不再推荐。

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn