如何通过jQuery检测指定元素的内联CSS样式变化？现有方案失效

嘿，问题出在你用的stylechanged事件根本不是浏览器或jQuery内置的事件，所以代码当然不会触发啦！针对你要监听目标元素display在none和block之间切换的需求，我给你几个靠谱的实现方案：

1. 用MutationObserver（最推荐，原生API） #

这是浏览器原生提供的监听DOM变化的工具，能精准捕获元素样式的修改——不管样式是通过JS、CSS还是其他方式改变的都能抓到：

// 先拿到目标元素
const targetEl = document.querySelector('.webform-component--personal-details');

// 创建一个观察者实例
const styleObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 只关心style属性的变化
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      const currentDisplay = targetEl.style.display;
      // 判断是不是我们要关注的两种状态
      if (currentDisplay === 'none' || currentDisplay === 'block') {
        console.log('CSS display状态改变了！当前状态:', currentDisplay);
      }
    }
  });
});

// 配置观察规则：只监听style属性的变化
styleObserver.observe(targetEl, {
  attributes: true,
  attributeFilter: ['style']
});

// 要是之后不需要监听了，可以调用 styleObserver.disconnect(); 停止观察

2. 直接监听触发样式变化的操作（更高效） #

如果这个元素的display切换是由特定的用户操作触发的（比如点击某个按钮、选择下拉选项），那直接监听这些触发事件会更简单高效，比如：

// 假设是某个按钮触发的样式切换，先找到这个按钮
$('.trigger-btn').on('click', function() {
  const $target = $('.webform-component--personal-details');
  // 切换后直接检查当前display状态
  const currentDisplay = $target.css('display');
  if (currentDisplay === 'none' || currentDisplay === 'block') {
    console.log('CSS display状态改变了！当前状态:', currentDisplay);
  }
});

3. 自定义jQuery事件（适合能控制样式修改代码的场景） #

如果你坚持想用类似stylechanged的写法，那可以在所有修改该元素style的地方手动触发自定义事件：

// 比如你修改样式的时候，顺便触发自定义事件
$('.webform-component--personal-details').css('display', 'block').trigger('stylechanged');

// 然后监听这个自定义事件
$('.webform-component--personal-details').on('stylechanged', function() {
  console.log('CSS display状态改变了！当前状态:', $(this).css('display'));
});

不过这个方法的前提是你能掌控所有修改该元素style的代码，不然会漏掉一些场景。

总的来说，MutationObserver是最通用、最可靠的方案，不管样式怎么变都能捕获到，优先推荐这个！

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