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

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 样式的用户能力。我没有有限数量的属性和有限数量的样式类，我不想放置颜色选择字段等等。不!因为用户将成为网页设计师，我会给他们机会在“maker”表的文本框中编辑 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;