如何创建自定义事件来跟踪 CSS 属性更改？

跟踪 CSS 属性更改的自定义事件

问题：当 div 或任何CSS 属性更改？

讨论： 虽然没有内置 CSS 更改事件，但您可以创建自己的 CSS 更改事件。有两种方法：

方法一：DOM轮询

<code class="javascript">var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');

function checkForChanges() {
  if ($element.css('height') != lastHeight) {
    // CSS height changed
    lastHeight = $element.css('height');
  }
  setTimeout(checkForChanges, 500);
}
checkForChanges();</code>

方法二：手动事件触发

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

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

优点：

• 方法一是自动的，不断监控 DOM 的变化。
• 方法二控制性更强，只有修改时才触发事件CSS。

文档：

• 绑定：将事件处理程序附加到指定元素。
• 触发：执行事件附加到元素的处理程序。

以上是如何创建自定义事件来跟踪 CSS 属性更改？的详细内容。更多信息请关注PHP中文网其他相关文章！