代码之家  ›  专栏  ›  技术社区  ›  Tom Smykowski

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

  •  3
  • Tom Smykowski  · 技术社区  · 15 年前

    我正在使用JS、HTML和CSS在线创建一个漂亮的产品比较表。现在,使用此工具生成的示例表如下所示:

    alt text

    这个表格的样式来自我的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样式更新为文本区域中输入的样式?

    1 回复  |  直到 15 年前
        1
  •  3
  •   Ben Lee    15 年前

    你的代码示例几乎是正确的。在html中放入类似的内容:

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

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