Question

We’ve got a little tool that I built where you can edit a jQuery template in one field and JSON data in another and then hit a button to see the results immediately within the browser.

I really need to expand this though so the designer can edit a full CSS stylesheet within another field and when we render the template, it will have the CSS applied to it. The idea being that once we’ve got good results we can take the contents of these three fields, put them in files and use them in our project.

I found the jQuery.cssRule plugin but it looks like it’s basically abandoned (all the links go nowhere and there’s been no development in three years). Is there something better or is it the only game in town?

Note: We’re looking for something where someone types traditional CSS stylesheet data in here and that is used immediately for rendering within the page and that can be edited and changed at will with the old rules going away and new ones used in their stead. I’m not looking for something where the designer has to learn jQuery syntax and enter in individual .css(“attribute”, “value”) type calls to jQuery.

Answer 1

Sure, just append a style tag to the head:

$("head").append("<style>p { color: blue; }</style>");

See it in action here.

You can replace the text in a dynamically added style tag using something like this:

$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);

See this in action here.