CSS 样式上的 Javascript 事件从块更改为无
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15580551/
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
Javascript event on CSS style change from block to none
提问by curioussam
Is there a pure Javascript event (no jQuery) that is fired when I change the CSS style of my divfrom blockto none. I was under the impression I can catch that via "onBlur" but looks like I cannot!
有没有当我改变我的CSS样式被发射的纯JavaScript事件（无jQuery的）div从block到none。我的印象是我可以通过“ onBlur”来捕捉它，但看起来我不能！
Please advise!
请指教！
回答by Joseph Lennox
There are no DOM events triggered for visibility changes.
没有为可见性更改触发的 DOM 事件。
The best you can do is always use the same function to adjust the block's visibility instead of changing it's style each time.
您能做的最好的事情就是始终使用相同的功能来调整块的可见性，而不是每次都改变它的样式。
Old pattern:
旧模式：
function doSomething() {
alert("I'm doing something!");
myBlock.style.display = "block";
}
function doSomethingElse() {
alert("I'm doing something else now!");
myBlock.style.display = "none";
}
New pattern:
新模式：
function doSomething() {
alert("I'm doing something!");
toggleMyBlock(true);
}
function doSomethingElse() {
alert("I'm doing something else now!");
toggleMyBlock(false);
}
function toggleMyBlock(show) {
if (show) {
// code here for what would be your 'it became visible' event.
} else {
// code here for what would be your 'it became invisible' event.
}
myBlock.style.display = show ? "block" : "none";
}
回答by Elmar Jansen
Going forward, the new "Intersection Observer API" is what you're looking for. It currently works in latest Chrome, Firefox and Edge. See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_APIfor more info.
展望未来，新的“Intersection Observer API”正是您所需要的。它目前适用于最新的 Chrome、Firefox 和 Edge。有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API。
Simple code example for observing display:none switching:
观察显示的简单代码示例：无切换：
// Start observing visbility of element. On change, the
// the callback is called with Boolean visibility as
// argument:
respondToVisibility(element, callback) {
var options = {
root: document.documentElement
}
var observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
callback(entry.intersectionRatio > 0);
});
}, options);
observer.observe(element);
}
respondToVisibility(myElement, isVisible => {
if (isVisible) {
doSomething();
}
});
In action: https://jsfiddle.net/elmarj/u35tez5n/5/
回答by CoolAJ86
You could use JavaScript to listen to a DOM event for a CSS3 transition (with a minimal fade time):
您可以使用 JavaScript 来监听 CSS3 转换的 DOM 事件（淡入淡出时间最短）：
回答by sellmeadog
I think the closest to what you're looking for would be the DOMAttrModifiedevent. I'm not entirely sure on it's usage, but it's along the lines of:
我认为最接近你正在寻找的是DOMAttrModifiedevent。我不完全确定它的用法，但它是沿着以下路线：
element.addEventListener('DOMAttrModified', function (e) {
...
});
The event handler receives a MutationEventwhich should provide you enough information to determine whether displayhas been set to blockor none.
事件处理程序接收 a MutationEvent，它应该为您提供足够的信息来确定是否display已设置为block或none。
EDIT
编辑
I may have misread the question. I don't believe a CSS change will result in a DOMAttrModifiedevent. Initially, I had read the question to mean you were setting displaywith a CSS value via JavaScript. My answer may not be helpful.
我可能误读了这个问题。我不相信 CSS 更改会导致DOMAttrModified事件。最初，我读过这个问题意味着您正在display通过 JavaScript设置CSS 值。我的回答可能没有帮助。
