能否使用jQuery为元素样式绑定change事件？求实现方案

嘿，你想要监听.bnotify元素的display样式变化并弹出提示是可以实现的，但首先得说明：jQuery本身并没有内置的change事件来监听CSS属性的变化，而且你写的代码里存在几个问题需要纠正：

• change事件原本是为表单元素（比如input、select）设计的，并不适用于监听普通元素的样式变化；
• 你的.on("change", $(".bnotify").css("display"), function(){...})写法有误，.on()方法的第二个参数应该是事件委托的选择器或额外数据，不是直接传入CSS属性值。

下面给你两种可行的实现方法，根据你的场景选就行：

方法一：手动触发自定义事件（推荐，适合你的场景） #

因为你是通过按钮点击调用toggle()来改变元素显示状态的，这种情况下最直接的方式就是在修改样式后手动触发一个自定义事件，然后监听这个事件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bnotify" style="width:20px;height:20px;background:red"></div>
<input type="submit" value="切换显示">

<script>
// 监听按钮点击，切换元素显示并触发自定义事件
$('input[type="submit"]').on('click', function() {
  $('.bnotify').toggle();
  // 触发自定义的displayChanged事件
  $('.bnotify').trigger('displayChanged');
});

// 监听自定义事件，触发提示
$('.bnotify').on('displayChanged', function() {
  alert("changed");
});
</script>

这种方法简单高效，因为样式变化是由你自己的代码触发的，完全可控，不需要额外的监听逻辑。

方法二：使用MutationObserver监听DOM属性变化 #

如果你的元素样式可能被其他代码修改（不止你当前的toggle按钮），可以用浏览器原生的MutationObserver API来监听元素的style属性变化：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bnotify" style="width:20px;height:20px;background:red"></div>
<input type="submit" onclick="$('.bnotify').toggle()">

<script>
const targetElement = document.querySelector('.bnotify');

// 创建观察者实例
const styleObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 只关心style属性的变化
    if (mutation.attributeName === 'style') {
      // 这里可以进一步判断display是否真的发生了变化
      const currentDisplay = $(targetElement).css('display');
      alert("changed");
    }
  });
});

// 配置观察选项：监听style属性的变化
const observerConfig = {
  attributes: true,
  attributeFilter: ['style'] // 只监听style属性，减少不必要的触发
};

// 开始观察目标元素
styleObserver.observe(targetElement, observerConfig);
</script>

这个API可以自动监听元素属性的变化，兼容性也不错（现代浏览器及IE11以上都支持），适合样式变化来源不确定的场景。

内容的提问来源于stack exchange，提问作者user8690818