Dynamically change CSS in input using javascript

Question

I am making an online creator of a beautiful product comparison table using JS, HTML and CSS. Now an example of a table generated using this tool is as follows:

And the style of this table comes from part of the style 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 do is add the user ability to change CSS styles online that I have higher. I do not have a limited number of properties and a limited number of style classes, I do not want to put a color picker and so on. No! Since users will be web designers, and I would give them the opportunity to edit CSS inside the text box on the maker table.

, , , - , . :

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

: ? CSS , ?

Answer 1

. - html:

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

javascript:

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