2013-07-01 49 views
1

我創建一個腳本,在那裏如果用戶點擊一個按鈕,它會創建新的段落和分配基礎,以長度的新的ID,例如,para.id =paragraph1paragraph2使用不同的ID的CSS規則, paragraph3 ...我想在JavaScript腳本中相應地將這些段落添加到cssRule中。我使用document.styleSheets[0].insertRule(#para.id{ }, paragraph.length);,但似乎沒有。我想插入這樣的規則而不分配樣式是因爲我想爲特定的樣式分配不同的段落。希望你們知道我的問題is.Thanks如何動態地創建在JavaScript

+0

你想使用jQuery嗎? –

+0

不行,我更喜歡使用javascript – dramasea

+0

你想爲每個段落分配相同的樣式嗎? – Sumurai8

回答

1

我會做一個:

var cssCode = "#" + para.id + " { /* any css rule there */ }"; 
var styleElement = document.createElement("style"); 
styleElement.type = "text/css"; 
if (styleElement.styleSheet) { 
    styleElement.styleSheet.cssText = cssCode; 
} 
else 
{ 
    styleElement.appendChild(document.createTextNode(cssCode)); 
} 
document.getElementsByTagName("head")[0].appendChild(styleElement); 

這將做完全一樣的靜態在你的頁面

追加

<style type="text/css"> 
    /* any css rule there */ 
</style> 

所以你不需要長度作爲輸入。此外,「insertRule」不適用於IE(cource,即不喜歡與其他人一樣)。雖然上述示例適用於任何Web瀏覽器。

要完成一個警告:確保您的ID是唯一的,或者您可能有問題! HTML中的ID必須以字母開頭(可能是HTML5軟化它,但爲了兼容性,最好以字母開頭)並且在頁面中是唯一的!

+0

的預設樣式還有什麼其他方法不能創建新樣式元素或只是將樣式追加到當前樣式元素 – dramasea

+0

問題是沒有辦法知道是否已有樣式元素不是src元素(從css文件導入樣式)。或者至少沒有簡單的方法。但是您可以創建一個樣式元素,並將所有規則添加到同一個樣式元素中。所以你只添加1個樣式元素。 – Ricola3D