Question

我想知道是否有一种方法可以检测嵌入到html中的某些样式是否已更改，例如：

<div id="corps" style="display: block;">

是否有一个事件可以检测“显示”何时更改？（JavaScript，而不是Jquery或其他） WC文档对事件检测到的内容（例如“ onchange”等）不是很清楚

Answer 1

您可以使用MutationObserver：

document.querySelector('button').addEventListener('click', function(e) {
    var ele = document.getElementById('corps');
    if (ele.style.display == 'block')
        ele.style.display = 'none';
    else
        ele.style.display = 'block';
});


var observer = new MutationObserver(function(mutationsList, observer) {
    for (var mutation of mutationsList){
        console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
});
observer.observe(document.getElementById('corps'), { attributes: true});

<div id="corps" style="display: block;">1111111111111111</div>
<button>Change div style</button>

Answer 2

您可以使用MutationObserver来监视特定元素的属性更改，并检查style是否已更改以及在这种情况下display的特定属性。

const div = document.querySelector('div')
let display = div.style.display

var observer = new MutationObserver((mutations, _) => {
  for (mutation of mutations) {
    const {type, attributeName} = mutation;
    if (type == 'attributes' && attributeName == 'style') {
      let newDisplay = div.style.display;
      if (display != newDisplay) {
        display = newDisplay;
        console.log(`Changed to: ${newDisplay}`)
      }
    }
  }
});

observer.observe(div, {
  attributes: true
})

setTimeout(() => {
  div.style.display = 'flex'
}, 1000)

setTimeout(() => {
  div.style.display = 'block'
}, 2000)

<div id="corps" style="display: block;">Observe</div>

Answer 3

您可以使用MutationObserver来监视style属性的更改，然后检查display属性是否已更改。

类似的事情可能会起作用：

let currentStyle = myDiv.style.display;
console.log("Initial display: ", currentStyle);

let observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(m) {
    if (myDiv.style.display != currentStyle) {
      console.log("Display changed to: ", myDiv.style.display);
    }
  });
});

let target = document.getElementById("myDiv");
observer.observe(target, {
  attributes: true,
  attributeFilter: ['style']
});

myDiv.style.display = "none";

<div id="myDiv" style="display: block;"></div>

HTML检测元素样式的更改

3 个答案: