How to Find Which JavaScript Is Changing an Element's Style

How do I see what JS is changing style to my elements in Chrome dev tools or Firefox dev tools?

The Chrome DevTools allow you to stop at a specific change in the DOM structure.

To do that right click the element and choose Break on > attribute modifications from the context menu.

Then, once the style attribute is added (may require a page reload), the script execution will stop at the JavaScript line where the change occurred.

Detect Element.Style changes with Javascript

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.

How do I find the origin source of an element.style? i.e. Which JS or jQ file is injecting it. I want to fix, not override

You should be able to find what styles are applied by using Chrome Devtools. In Chrome, if you right click on an element and "inspect," then view the styles in the "Computed" tab then you should see what styles are affecting the element.

If you're looking for the injected javascript, try this previously asked question's answer. Here, Chrome Devtools DOM breakpoint is used to find the css.

Example image:

After DevTools sends you to the "sources" tab it shows the first file that executes. However, if you click on the "Call Stack" drop down menu, it will show you all the affecting files, and if you click through them you can find the one causing the problem. When you get to the right file, DevTools will highlight the code that is affecting the page.

Javascript listen for style changes made in developer-tools

You can access the styles of a HTMLElement using element.style in JavaScript. So you could probably save the styles on page load, check them again when the user initiates a save and compare -- the difference would be the users changes.

As for detecting them as soon as they happen, you can use MutationObserver to get notified of attribute changes on the page. This works for when you add styles to a specific element in the Devtools, but not for editing existing styles and (I think) adding styles to existing selectors. I'm not sure if there is a way to get an event when these change.

Edit: actually, it seems as if checking element.style has the same limits as using MutationObserver: only styles added for the specific element (that is, styles that show up as inline styles in the DOM) show up. There might be a way to actually access all styles, but I'm not aware of it.

Detect element style change in chrome

You should be able to do this with a MutationObserver - see demo (Webkit only), which is the new, shiny way of getting notified about changes in the DOM. The older, now deprecated, way was Mutation events.

Demo simply logs in the console the old and new values when the paragraph is clicked. Note that the old value will not be available if it was set via a non-inline CSS rule, but the change will still be detected.

HTML

<p id="observable" style="color: red">Lorem ipsum</p>​

JavaScript

var MutationObserver = window.WebKitMutationObserver;

var target = document.querySelector('#observable');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log('old', mutation.oldValue);
    console.log('new', mutation.target.style.cssText);
  });    
});

var config = { attributes: true, attributeOldValue: true }

observer.observe(target, config);

// click event to change colour of the thing we are observing
target.addEventListener('click', function(ev) {
    observable.style.color = 'green';
    return false;
}, false);

Credit to this blog post, for some of the code above.

Find javascript that is changing DOM element

Right click on DOM element > Break on > Attributes Modifications

Via #3 in https://elijahmanor.com/blog/7-chrome-tips-developers-designers-may-not-know

How to get an HTML element's style values in JavaScript?

The element.style property lets you know only the CSS properties that were defined as inline in that element (programmatically, or defined in the style attribute of the element), you should get the computed style.

Is not so easy to do it in a cross-browser way, IE has its own way, through the element.currentStyle property, and the DOM Level 2 standard way, implemented by other browsers is through the document.defaultView.getComputedStyle method.

The two ways have differences, for example, the IE element.currentStyle property expect that you access the CCS property names composed of two or more words in camelCase (e.g. maxHeight, fontSize, backgroundColor, etc), the standard way expects the properties with the words separated with dashes (e.g. max-height, font-size, background-color, etc).

Also, the IE element.currentStyle will return all the sizes in the unit that they were specified, (e.g. 12pt, 50%, 5em), the standard way will compute the actual size in pixels always.

I made some time ago a cross-browser function that allows you to get the computed styles in a cross-browser way:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

The above function is not perfect for some cases, for example for colors, the standard method will return colors in the rgb(...) notation, on IE they will return them as they were defined.

I'm currently working on an article in the subject, you can follow the changes I make to this function here.

Which javascript is unexpectedly changing the element's style?

In Chrome, right-click on the element in the inspector document and select Break on > attribute modifications.

---

Related Topics