javascript - 观察可构造样式表的变化

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 的代码，您可以替换工作表上的方法(和 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>