使用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樣式的能力。我沒有有限數量的屬性和有限數量的樣式類，我不想放置顏色選擇字段等等。沒有！因爲用戶將成爲webdesigners，我會給他們機會編輯表格「製造商」的文本框中的CSS。

所以基本上我需要做的就是動態地將網站樣式改變爲寫在文本框中的樣式。在僞代碼我會這樣寫：

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

所以：它是可能的和如何去它？如何將整個網站的CSS樣式更新爲textarea中的樣式輸入？

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;