Inserting CSS for an Element from a input field

Question

Is there any easy way to take in a block of CSS from the user from an textarea and add this styling to the styling for a specific div?

See I'm creating a simple code preview tool like codePen, so far I have two textarea inputs, one for Html and one for CSS, as the user types in the Html input this updates the preview pane, this works, now I want to do it for CSS.

CSS textarea could contain a few blocks like:

h1 {
  font-size:23px;
}

.myClass {
    //Somestyle
}

Now I want this CSS to be contained in the

<div id="preview"></div>

So it doesnt effect the rest of the page, so a manual example would be

$('preview h1').css('font-size','23px');

Anyway to automate this?

what are you using for jQuery or JS to do this now...or do you want users to just write it for you? — Phlume
– Phlume, Commented Mar 6, 2014 at 17:27
Indeed as @Jacob suggests, an iframe seems like a good idea, and is what sites like jsfiddle or jsbin use... — DarkAjax
– DarkAjax, Commented Mar 6, 2014 at 18:11
Thanks for the reply, at the moment I'm simply updating the HTML preview by waiting until keyup stops for 3 seconds, this simply pulls the content from the text area and inserts it into the preview pain like so: var content = $('#textareaId').val(); $('#preview').html(content), of course I'd be open to using an iframe from the preview if this would be a feasible approach could you describe how this may be done? And would the preview reload be lagging. — user524156
– user524156, Commented Mar 7, 2014 at 0:32

Ananthan Unni · Accepted Answer · 2014-03-06 18:14:45Z

1

Do it like this. Hope it works.

Add a style block for dynamic styling.

<style id="dynamicCss">
</style>

on the apply button click handler, set the style

$('#btnApplyStyle').click(function(){
   $('#dynamicCss').html('').html($('#txtaCustomCss').val());
});

See the Fiddle here. Please use developer tools to see the new style tag added to head section.

This script simply adds rule to the document. If you don't want that behavior, you can use this plugin in combination with my logic to set scope for rule. You will need to place the style tag inside of the container and add a scoped attribute to style for it to work. Please see the documentation.

edited Mar 6, 2014 at 18:14

answered Mar 6, 2014 at 18:02

Ananthan Unni

1,30410 silver badges24 bronze badges

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

4 Comments

Eduardo Quintana Over a year ago

That would work also but it will affect all the DOM on the page no? =S

Ananthan Unni Over a year ago

Definitely. This script simply adds rule to the document.

user524156 Over a year ago

That looks sweet!, thanks for the feedback, I't does more than I need, I'd still like to find out how this is done w/o digging into that code for the plugin my JavaScript is limited at present.

Ananthan Unni Over a year ago

Thanks. If you want to apply scope to the rules, then I think you will manually need to modify the selectors in custom CSS rules to prepend with the container selector. Like if the textbox rule is .custom{...} then you will need to manually change it to #container .custom{...} and like that. Will require more complex logic and script than the one in this answer.

Jacob · Accepted Answer · 2014-03-07 16:29:34Z

0

If you want to use the iframe approach instead, you'll first need an HTML document to host inside of the iframe. The iframe document should be loaded for the same origin (protocol + domain) as the host document (cross-document cross-domain stuff is tricky otherwise). With your application, this is probably not an issue.

Host page:

<iframe id="preview" src="preview.html"></iframe>

To make things easier on yourself, this iframe document could load a script with convenience functions for injecting the HTML and CSS from the host.

preview.html:

<html>
    <head>
        <script src="preview.js"></script>
        <style type="text/css" id="page-css"></style>
    </head>
    <body></body>
</html>

preview.js:

function setHTML(html) {
    document.querySelector('body').innerHTML = html;
}

function setCSS(css) {
    var stylesheet = document.querySelector('#page-css');

    // Empty the stylesheet
    while (stylesheet.firstChild) {
        stylesheet.removeChild(stylesheet.firstChild);
    }

    // Inject new CSS
    stylesheet.appendChild(document.createTextNode(css));
}

Now, from the host page, you can call these functions whenever your text inputs change:

document.querySelector('#preview').contentWindow.setCSS(someCSS);

answered Mar 7, 2014 at 16:29

Jacob

79k24 gold badges159 silver badges245 bronze badges

1 Comment

user524156 Over a year ago

thank you very informative,I will try and implement this tomarrow!

Mohammad Areeb Siddiqui · Accepted Answer · 2014-03-06 17:30:07Z

0

This plugin may come in handy: https://github.com/websanova/wJSNova/downloads .

answered Mar 6, 2014 at 17:30

Mohammad Areeb Siddiqui

10.2k16 gold badges74 silver badges118 bronze badges

Comments

Eduardo Quintana · Accepted Answer · 2014-03-06 17:48:24Z

0

Edited

Insert the text of the rules in one of the existing cssStyleSheets you have.

It will be something like

window.document.styleSheets[0].insertRule("a{color:red;}",window.document.styleSheets[0].cssRules.length)

The first parameter is the rule to insert and the second is the index.

Fiddle

The only problem here is that this will affect all the DOM on the page maybe looking for a way to add the #preview before each css rule to get something like

 #preview h1{}

edited Mar 6, 2014 at 17:48

answered Mar 6, 2014 at 17:29

Eduardo Quintana

2,3881 gold badge16 silver badges20 bronze badges

2 Comments

Mohammad Areeb Siddiqui Over a year ago

I believe that's not possible.

Eduardo Quintana Over a year ago

You're right i thought that it was only needed to add the css property to the h1.

Collectives™ on Stack Overflow

Inserting CSS for an Element from a input field

4 Answers 4

4 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related