Question

I have the following HTML code:

<style>
  .thing { color: red }
</style>

<p class="thing">This is a nice thing</p>

I would like to change the “.thing”-style for all current content and all future content which comes to the page via AJAX.

$('.thing').css('color', 'blue');

This would work, but if new HTML code is added to the document via AJAX, all “.thing”-elements will still be colored red.

What I want is to change the whole style property “.thing” for the document and not only for the current elements (with a jQuery selector).

Thanks!

Answer 1

You could add a style rule in the header with the DOM

Demo: The Problem

Demo: DOM Mutation Solution

var newStyles = document.createElement("style");
newStyles.type="text/css";
newStyles.innerHTML = ".thing{color:blue}";
document.head.appendChild(newStyles);