使用Javascript动态更改输入文本中的CSS

我正在使用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样式的能力.我没有数量有限的属性和样式类,也没有颜色选择字段,等等.没有！因为用户将是Webdesigners,所以我会给他们机会在“ maker”表的文本框中编辑CSS.

因此,基本上我需要完成的是将网站样式动态更改为在文本框中编写的样式.用伪代码,我会这样写：

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

因此：是否可能以及如何做到？如何将整个站点CSS样式更新为textarea中输入的样式？

最佳答案

您的代码示例几乎是正确的.在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;