Dynamically change CSS in input text using Javascript

Question

I'm doing a online "creator" of a nice looking product comparison table using JS, HTML and CSS. Now a example table generated with this tool looks like this:

And the style of this table comes from a style part of my HTML, it looks like this:

<style>

tr.numer1
{
 background-color: #FFFFFF;
}

tr.numer2
{
 background-color: #FFFBD0;
}

td.custTD
{
  border-bottom: 1px solid #CCCCCC;
}

span.propertyCust
{
  font-weight: bold;
  color: #444444;
}

span.productCust
{
  font-weight: bold;
  color: #444444;
}

body
{
  font: 18px Georgia, Serif;
}


</style>

Now, what I would like to acomplish is to add the user ability of online, real-time changing of the CSS styles that I have above. I don't have limited number of properties and limited number of style classes, I don't want to put a color select field and so on. No! Because users will be webdesigners and I would give them opportunity to edit CSS inside a textbox on the table "maker".

So basically what I need to acomplish is to dynamically change site style to those written in a textbox. In pseudocode i would write it in this way:

document.style = document.getElementById('styleTextarea').innerHTML

So: Is it possible and how to to it? How to update a whole site CSS style to styles input in a textarea?

Answer 1

Your code example was almost right. Put something like this in the html:

<style type="text/css" id="table-style"></style>
<textarea id="table-style-textarea"></textarea>

Then in the javascript:

document.getElementById('table-style').innerHTML = document.getElementById('table-style-textarea').value;