展望未来，您正在寻找新的 HTML Intersection Observer API。它允许您配置一个回调，只要一个元素（称为目标）与设备视口或指定元素相交，就会调用该回调。它在最新版本的 Chrome、Firefox 和 Edge 中可用。有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API。

观察显示的简单代码示例：无切换：

// Start observing visbility of element. On change, the
//   the callback is called with Boolean visibility as
//   argument:

function 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);
}

在行动：https : //jsfiddle.net/elmarj/u35tez5n/5/

var targetNode = document.getElementById('elementId');
var observer = new MutationObserver(function(){
    if(targetNode.style.display != 'none'){
        // doSomething
    }
});
observer.observe(targetNode, { attributes: true, childList: true });

我可能有点晚了，但您可以使用 MutationObserver 来观察所需元素的任何变化。如果发生任何更改，您只需检查元素是否显示。

至少有一种方法，但不是很好的方法。您可以轮询元素以进行如下更改：

var previous_style,
    poll = window.setInterval(function()
{
    var current_style = document.getElementById('target').style.display;
    if (previous_style != current_style) {
        alert('style changed');
        window.clearInterval(poll);
    } else {
        previous_style = current_style;
    }
}, 100);

DOM 标准还指定了mutation events，但我从来没有机会使用它们，我不确定它们的支持程度。你会像这样使用它们：

target.addEventListener('DOMAttrModified', function()
{
    if (e.attrName == 'style') {
        alert('style changed');
    }
}, false);

这段代码不在我的脑海中，所以我不确定它是否有效。

将最好的，最简单的解决办法是在显示你的目标功能的回调。

我遇到了同样的问题，并为我们的网站创建了一个 jQuery 插件来解决它。

https://github.com/shaunbowe/jquery.visibilityChanged

根据您的示例，您将如何使用它：

$('#contentDiv').visibilityChanged(function(element, visible) {
    alert("do something");
});

正如@figha 所说，如果这是您自己的网页，那么您应该在使元素可见后运行您需要运行的任何内容。

然而，为了回答这个问题（以及任何制作 Chrome 或 Firefox Extensions 的人，这是一个常见的用例），Mutation Summary和Mutation Observer将允许 DOM 更改触发事件。

例如，为具有data-widget添加到 DOM 的属性的元素触发事件。从 David Walsh 的博客中借用这个很好的例子：

var observer = new MutationObserver(function(mutations) {
    // For the sake of...observation...let's output the mutation to console to see how this all works
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });    
});

// Notify me of everything!
var observerConfig = {
    attributes: true, 
    childList: true, 
    characterData: true 
};

// Node, config
// In this case we'll listen to all changes to body and child nodes
var targetNode = document.body;
observer.observe(targetNode, observerConfig);

react包括added，removed，valueChanged和更多。valueChanged包括所有属性，包括display等。