Javascript 在 CSS 更改上使用 Jquery 触发事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8671001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger event using Jquery on CSS change?
提问by Brodie
I'm curious is there an event listener or perhaps a way to construct a method that will trigger when a CSS change happens?
我很好奇是否有一个事件监听器或者一种方法来构造一个在 CSS 更改发生时触发的方法？
My stylesheet uses media queries and I want to know if there's a way to attach a listener to see when those media queries kick in and out. For example I have a media query that hides a button at certain screen widths
我的样式表使用媒体查询，我想知道是否有办法附加侦听器以查看这些媒体查询何时开始和结束。例如，我有一个媒体查询，它在某些屏幕宽度处隐藏了一个按钮
@media screen and (max-width: 480px) {
#search-button {
display: none;
}
}
What event listener would I use to detect when that display changes? I'm currently doing this:
我将使用什么事件侦听器来检测显示何时发生变化？我目前正在这样做：
$(window).resize(function() {
if($('#search-button').css("display") == "none") {
//do something
} else {
//do something else
}
});
Which works fine, but it calls the listener every time the user changes the screen and I'd rather just have it fire only when the css of the button changes. I hope that makes sense.
这工作正常，但每次用户更改屏幕时它都会调用侦听器，我宁愿仅在按钮的 css 更改时才触发它。我希望这是有道理的。
for example this is what I'd like
例如，这就是我想要的
$('#search-button').cssEventListenerOfSomeKind(function() {
alert('the display changed');
});
采纳答案by Jasper
Binding to the window.resizeis your best option (I believe). There isn't any event fired when you change an element's CSS. You can however optimize a bit by caching the selector used:
绑定到window.resize是你最好的选择（我相信）。更改元素的 CSS 时不会触发任何事件。但是，您可以通过缓存使用的选择器来优化一下：
var $searcButton = $('#search-button');
$(window).resize(function() {
if($searcButton.css("display") == "none") {
//do something
} else {
//do something else
}
});
Or you can use $(window).width()to check the width of the viewport:
或者您可以使用$(window).width()来检查视口的宽度：
var $window = $(window);
$window.resize(function() {
if($window.width() <= 480) {
//do something
} else {
//do something else
}
});
UPDATE
更新
You can always throttle your own event handler:
您始终可以限制自己的事件处理程序：
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
}
}
});
This will prevent the code in your resizeevent handler from running more than once every quarter second.
这将防止resize事件处理程序中的代码每四分之一秒运行一次以上。
回答by lemonSkip
I know this is old but I managed to solve it with this logic
我知道这很旧，但我设法用这个逻辑解决了它
// set width and height of element that is controlled by the media query
var page_width = $page.width();
var page_height = $page.height();
$window = $(window).resize(function(){
if( $page.width() != page_width ) {
// update page_width and height so it only executes your
// function when a change occurs
page_width = $page.width();
page_height = $page.height();
// do something
// ...
}
});
回答by Kris Hollenbeck
If it is only a one time event you could try to unbind the event.
如果它只是一次性事件，您可以尝试解除该事件的绑定。
