Detect Element.Style changes with Javascript

Question

I am at the moment working on a little extension to enhance a website namely the google plus post box. I want to move it to the very left of the monitor.

This post box however resets its values every time it is opened.

Basically I would like to kill off that behavior, and thought I could just monitor the element for element.style changes, and overwrite them again. However DOMAttrModified seems not to work for stuff like that

Additionally to that I have found that when the post box is closed it ceases to exist oO?

Maybe someone here has an idea how to tackle this I could of course just loop an operation that sets the style every second or so. but no thanks XD

thanks a lot for helping :)

Jan Turoň · Accepted Answer · 2018-12-18 10:08:14Z

9

Mutation events are deprecated, DOMAttrModified is not and will not be supported by webkit browsers. Use Mutation Observers instead. Alternatively, you can try this workaround.

edited Dec 18, 2018 at 10:08

answered Jun 16, 2013 at 15:34

Jan Turoň

33.1k24 gold badges139 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DemonWareXT Over a year ago

woah thanks a lot :D this worked awesome, after I found some other stray bug in my extension thanks again, you helped a lot

Roko C. Buljan · Accepted Answer · 2021-03-07 00:07:39Z

To get you quickly started with using Mutation Observer
here's a small reusable function

/**
 * 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));
};

To track only attribute "style" changes on some class="item" Elements, use like:

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

To watch for all attributes changes, instead of the attributesList Array use :

attributes: true

If needed, here's an example:

/**
 * 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>

Collectives™ on Stack Overflow

Detect Element.Style changes with Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related