javascript - CSS 样式上的 Javascript 事件从块更改为无

Question

div当我将我的 CSS 样式更改为fromblock时，是否会触发纯 Javascript 事件（无 jQuery）none。我的印象是我可以通过“ onBlur”捕捉到它，但看起来我不能！

请指教！

Answer 1

可见性更改不会触发 DOM 事件。

你能做的最好的就是始终使用相同的功能来调整块的可见性，而不是每次都改变它的样式。

旧模式：

function doSomething() {
    alert("I'm doing something!");
    myBlock.style.display = "block";
}

function doSomethingElse() {
    alert("I'm doing something else now!");
    myBlock.style.display = "none";
}

新模式：

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";
}

Answer 2

展望未来，您正在寻找新的“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:

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

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

Answer 3

您可以使用 JavaScript 来侦听 DOM 事件以进行 CSS3 转换（淡化时间最短）：

• CSS3 过渡事件

Answer 4

我认为最接近您正在寻找的是DOMAttrModifiedevent。我不完全确定它的用法，但大致如下：

element.addEventListener('DOMAttrModified', function (e) {
  ...
});

事件处理程序收到一个MutationEvent应该为您提供足够信息以确定是否display已设置为block或的信息none。

编辑

我可能误读了这个问题。我不相信 CSS 更改会导致DOMAttrModified事件。最初，我读过这个问题的意思是您正在display通过 JavaScript 设置 CSS 值。我的回答可能没有帮助。