動態創建DOM對象並給予類

Question

我使用Javascript爲下拉菜單動態創建選項元素，並想知道如何向它們添加一個類，以便我可以使用CSS對它們進行樣式設置。

我有以下代碼：

for (var i=0;i<portfolio.length-1;i++) { 
    portfolioSelect.options[portfolioSelect.options.length] = 
     new Option(portfolio[i]); 
} 

其中組合是由外部源填充的數組。

HTML，其中選擇插入：

<select id="portfolio" name="portfolio"> 
    <option selected="selected" value="Select One">Select One</option> 
</select> 

Answer 1

您可以指定類名（S）到className屬性，例如：

var opt; 
for (var i=0;i<portfolio.length-1;i++) { 
    opt = new Option(portfolio[i]); 
    opt.className = "your_class_name_here"; 
    portfolioSelect.options[portfolioSelect.options.length] = opt; 
} 

這是任何DOM元素的事實。 className反映元素上的class屬性（因爲class是Javascript中的保留字，所以它的名稱就是這樣命名的）。該值與屬性完全相同，這意味着它可以有多個由空格分隔的類。

Answer 2

for (i=0;i<portfolio.length-1;i++) { 
    var option = new Option(portfolio[i]); 
    option.setAttribute('class', 'your-class-name'); 
    portfolioSelect.options[portfolioSelect.options.length] = option; 
}