CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user524156
user524156

Reputation: 725

Inserting CSS for an Element from a input field

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?

Upvotes: 0

Views: 318

Answers (4)

Jacob
Jacob

Reputation: 78850

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);

Upvotes: 0

Ananthan Unni
Ananthan Unni

Reputation: 1304

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.

Upvotes: 1

Eduardo Quintana
Eduardo Quintana

Reputation: 2388

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{}

Upvotes: 0

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

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

Upvotes: 0

Related Questions