MutationObserver: new value in the format of `oldValue`

Question

I'm using a MutationObserver and I'd like to access the new value of the attibute. I try this:

newValue = mutation.target[mutation.attributeName]

However, if for example mutation.attributeName == 'style', then mutation.oldValue and my newValue are formatted differently: mutation.oldValue is a string formatted like newValue.cssText, whereas newValue itself is a CSSStyleDeclaration object.

I would like to avoid programming for each possible mutation.attributeName things like "if 'style', use .cssText, if ..., use ...". There are too many possible attributes.

How do I get the new value in the format of oldValue?

---

Related questions don't answer my question:

• mutation["addedNodes"][0] from here is undefined in my case.
• This answer requires the element to have an ID. That might be difficult to achieve in some cases.

Edit:

• This answer suggests newValue = mutation.target.attributes.getNamedItem(mutation.attributeName), but that has a different format than mutation.oldValue as well. For details, see here.

Answer 1

Attributes and properties are different things. To get the attribute string, you'd use getAttribute:

newValue = mutation.target.getAttribute(mutation.attributeName);

You were accessing the property from the element instance, which in the case of style is a CSSStyleDeclaration object reflecting the parsed style properties from the style attribute. While many attributes are reflected directly as properties (id, name), others are in a different form (like style) or aren't available as properties on the element at all.