Динамическое изменение 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 внутри текстового поля на столе «создатель».

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

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;