观察 Constructible StyleSheets 的变化

Question

我有以下使用可构建样式表的代码片段。（单击按钮时，随附的可构造样式表会更新为随机颜色）。

如何观察和聆听这种变化？（我想捕获元素上的计算样式更改，或者 - 更新的可构造样式表）

var div1 = document.getElementById("div1");


var observer = new MutationObserver(function (mutations) {
  let text = "";
  mutations.forEach(function (mutation) {
    text += "changed " + mutation.attributeName;
  });
  document.getElementById("output").innerHTML += `<div>${text}</div>`;
});

var observerConfig = {
  attributes: true
};

var targetNode = document.getElementById("div1");

document.getElementById("btnAttachStyleSheet").addEventListener("click", () => {
  switch (Math.floor(Math.random() * 5)) {
    case 1:
      sheet.replaceSync(".color {color:blue}");
      break;
    case 2:
      sheet.replaceSync(".color {color:yellow}");
      break;
    case 3:
      sheet.replaceSync(".color {color:green}");
      break;
    case 4:
      sheet.replaceSync(".color {color:brown}");
      break;
    default:
      sheet.replaceSync(".color {color:pink}");
  }
});
const sheet = new CSSStyleSheet();
document.adoptedStyleSheets = [sheet];
observer.observe(targetNode, observerConfig);

<h1>Adopted stylesheets</h1>
<button id="btnAttachStyleSheet">Update style sheet</button>
<div style="padding: 1rem;" id="div1" class="color">colored div</div>

<h3>mutations:</h3>
<div id="output"></div>

Answer 1

replaceSync 的规范没有提到触发任何事件。它不是 DOM 突变，因此您无法使用 `MutationObserver.

观察它

相反，如果您控制调用 replaceSync 的代码，请调用您自己的执行 replaceSync 的函数，然后引发特定于您的代码的事件（对于 replace 也类似）：

var div1 = document.getElementById("div1");

var targetNode = document.getElementById("div1");

document.getElementById("btnAttachStyleSheet").addEventListener("click", () => {
  switch (Math.floor(Math.random() * 5)) {
    case 1:
      sheetReplaceSync(sheet, ".color {color:blue}");
      break;
    case 2:
      sheetReplaceSync(sheet, ".color {color:yellow}");
      break;
    case 3:
      sheetReplaceSync(sheet, ".color {color:green}");
      break;
    case 4:
      sheetReplaceSync(sheet, ".color {color:brown}");
      break;
    default:
      sheetReplaceSync(sheet, ".color {color:pink}");
  }
});
const sheet = new CSSStyleSheet();
function sheetReplaceSync(sheet, ...args) {
    const result = sheet.replaceSync(...args);
    console.log("Changed!");
    return result;
}
function sheetReplace(sheet, ...args) {
    return sheet.replace(...args).then(result => {
        console.log("Changed!");
        return result;
    });
};
document.adoptedStyleSheets = [sheet];

<h1>Adopted stylesheets</h1>
<button id="btnAttachStyleSheet">Update style sheet</button>
<div style="padding: 1rem;" id="div1" class="color">colored div</div>
<h3>mutations:</h3>
<div id="output"></div>

如果您不控制调用 replaceSync 的代码，您可以替换 sheet 上的方法（和 replace）以利用它，但我会避免如果可能的话：

var div1 = document.getElementById("div1");

var targetNode = document.getElementById("div1");

document.getElementById("btnAttachStyleSheet").addEventListener("click", () => {
  switch (Math.floor(Math.random() * 5)) {
    case 1:
      sheet.replaceSync(".color {color:blue}");
      break;
    case 2:
      sheet.replaceSync(".color {color:yellow}");
      break;
    case 3:
      sheet.replaceSync(".color {color:green}");
      break;
    case 4:
      sheet.replaceSync(".color {color:brown}");
      break;
    default:
      sheet.replaceSync(".color {color:pink}");
  }
});
const sheet = new CSSStyleSheet();
const replaceSync = sheet.replaceSync;
const replace = sheet.replace;
sheet.replaceSync = function(...args) {
    const result = replaceSync.call(this, ...args);
    console.log("Changed!");
    return result;
};
sheet.replace = function(...args) {
    return replace.call(this, ...args).then(result => {
        console.log("Changed!");
        return result;
    });
};
document.adoptedStyleSheets = [sheet];

<h1>Adopted stylesheets</h1>
<button id="btnAttachStyleSheet">Update style sheet</button>
<div style="padding: 1rem;" id="div1" class="color">colored div</div>
<h3>mutations:</h3>
<div id="output"></div>

观察 Constructible StyleSheets 的变化

Observing Constructible StyleSheets changes

javascript

mutation-observers