Динамически создать объект 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, например ::10000 *.

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;
}