javascript - 动态创建 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

您可以将类名分配给 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 反射(reflect)了元素上的 class 属性(这样命名是因为 class 是 Javascript 中的保留字)。该值与属性完全相同，这意味着它可以由空格分隔多个类。