javascript - 在 CSS 更改时使用 Jquery 触发事件？

Question

我很好奇是否有事件监听器或者可能是一种构建方法的方法，该方法将在发生 CSS 更改时触发？

我的样式表使用媒体查询，我想知道是否有办法附加一个监听器以查看这些媒体查询何时启动和退出。例如，我有一个媒体查询，它在某些屏幕宽度处隐藏了一个按钮

@media screen and (max-width: 480px) {
  #search-button {
    display: none;
  }
}

我将使用什么事件监听器来检测显示何时发生变化？我目前正在这样做:

$(window).resize(function() {
  if($('#search-button').css("display") == "none") {
    //do something
  } else {
    //do something else
  }
});

它工作正常，但每次用户更改屏幕时它都会调用监听器，我宁愿只在按钮的 css 更改时触发它。我希望这是有道理的。

例如这是我想要的

$('#search-button').cssEventListenerOfSomeKind(function() {
  alert('the display changed');
});

Answer 1

绑定(bind)到 window.resize 是您最好的选择(我相信)。更改元素的 CSS 时不会触发任何事件。但是，您可以通过缓存使用的选择器来进行一些优化:

var $searcButton = $('#search-button');
$(window).resize(function() {
    if($searcButton.css("display") == "none") {
        //do something
    } else {
        //do something else
    }
});

或者你可以使用$(window).width()来检查视口(viewport)的宽度:

var $window = $(window);
$window.resize(function() {
    if($window.width() <= 480) {
        //do something
    } else {
        //do something else
    }
});

更新

您始终可以限制自己的事件处理程序:

var $window   = $(window),
    resize_ok = true,
    timer;

timer = setInterval(function () {
    resize_ok = true;
}, 250);

$window.resize(function() {
    if (resize_ok === true) {
        resize_ok = false;
        if($window.width() <= 480) {
            //do something
        } else {
            //do something else
        }
    }
});

这将防止您的 resize 事件处理程序中的代码每四分之一秒运行一次以上。