Créer dynamiquement un objet DOM et donner une classe

Question

Je crée dynamiquement des éléments d'options pour un menu déroulant en utilisant Javascript et je voudrais savoir comment leur ajouter une classe afin de pouvoir les styler avec CSS.

J'ai le code suivant:

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

où portefeuille est un tableau peuplé par une source extérieure.

HTML où les options insérés:

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

Answer 1

Vous pouvez attribuer un nom de classe (s) à la propriété className, par exemple .:

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

Cela est vrai de tout élément DOM. className reflète l'attribut class sur l'élément (il est nommé ainsi car class est un mot réservé en Javascript). La valeur est exactement comme l'attribut, ce qui signifie que plusieurs classes peuvent être séparées par des espaces.

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