Question

我目前正在进行一些扩展以增强网站即google plus邮箱。我想把它移到监视器的左边。

但是，此帖子每次打开时都会重置其值。

基本上我想要消除这种行为，并认为我可以只监视element.style更改的元素，并再次覆盖它们。但是，DOMAttrModified似乎不适用于那样的东西

除此之外，我发现当邮箱关闭时，它不再存在了吗？

也许这里有人知道如何解决这个问题我当然可以循环一个每隔一秒左右设置样式的操作。但不，谢谢XD

非常感谢您的帮助:)。

Answer 1

不推荐使用变异事件，不支持DOMAttrModified，并且webkit浏览器支持will not be。请改用Mutation Observers。或者，您可以尝试this workaround。

Answer 2

让您快速开始使用Mutation Observer
这是一个可重用的小函数

/**
 * Mutation Observer Helper function
 * //developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
 * @param {string} sel The DOM selector to watch 
 * @param {object} opt MutationObserver options 
 * @param {function} cb Pass Mutation object to a callback function
 */
const Observe = (sel, opt, cb) => {
  const Obs = new MutationObserver((m) => [...m].forEach(cb));
  document.querySelectorAll(sel).forEach(el => Obs.observe(el, opt));
};

要仅跟踪某些 "style" 元素的属性 class="item" 更改，请使用 like：

Observe(".item", {
  attributesList: ["style"], // Only the "style" attribute
  attributeOldValue: true,   // Report also the oldValue
}, (m) => {
  console.log(m);            // Mutation object
});

要观察所有属性的变化，而不是使用 attributesList 数组：

attributes: true

如果需要，这里有一个例子：

/**
 * Mutation Observer Helper function
 * //developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
 * @param {string} sel The DOM selector to watch 
 * @param {object} opt MutationObserver options 
 * @param {function} cb Pass Mutation object to a callback function
 */
const Observe = (sel, opt, cb) => {
  const Obs = new MutationObserver((m) => [...m].forEach(cb));
  document.querySelectorAll(sel).forEach(el => Obs.observe(el, opt));
};

// DEMO TIME:
Observe("#test", {
  attributesList: ["style"], 
  attributeOldValue: true,
}, (m) => {
  console.log(`
    Old value: ${m.oldValue}
    New value: ${m.target.getAttribute(m.attributeName)}
  `);
});

const EL_test = document.querySelector("#test");
EL_test.addEventListener("input", () => EL_test.style.cssText = EL_test.value);
EL_test.style.cssText = EL_test.value;

* {margin:0;}
textarea {width: 60%;height: 50px;}

<textarea id="test">
background: #0bf;
color: #000;
</textarea>

使用Javascript检测Element.Style更改

2 个答案: