Динамически изменять CSS во входном тексте, используя Javascript

Question

Я делаю онлайн "создателя" красивой таблицы сравнения продуктов, используя JS, HTML и CSS. Теперь пример таблицы, созданной с помощью этого инструмента, выглядит следующим образом:

И стиль этой таблицы взят из стилевой части моего HTML, она выглядит так:

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

Теперь, что я хотел бы добавить, так это добавить пользователю возможность в режиме реального времени изменять стили CSS, которые у меня есть выше. У меня нет ограниченного количества свойств и ограниченного количества классов стилей, я не хочу помещать поле выбора цвета и так далее. Нет! Потому что пользователи будут веб-дизайнерами, и я бы дал им возможность редактировать CSS внутри текстового поля на столе "maker".

Так что, в основном, мне нужно выполнить динамическое изменение стиля сайта на стиль, указанный в текстовом поле. В псевдокоде я бы написал так:

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;