![](/img/trans.png)
[英]How to change css class property dynamically from javascript using html input
[英]Dynamically change CSS in input text using Javascript
我正在使用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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.