동적으로 DOM 객체를 만들고 클래스를 제공합니다.

Question

자바 스크립트를 사용하여 드롭 다운 메뉴에 대한 옵션 요소를 동적으로 만들고 있는데, 클래스를 추가하여 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은 요소에 class 속성을 반영합니다 (class은 자바 스크립트에서 예약어이므로 해당 이름이 지정되었습니다). 값은 속성과 정확히 동일합니다. 즉, 여러 클래스를 공백으로 구분할 수 있습니다.

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