여러 HTML 요소에 CSS 속성 설정

Question

두 개의 버튼 (업데이트, 저장)에 CSS 속성을 설정하는이 부분이 있습니다. 나는 코드 줄을 최소화하기 위해 노력하고있어 모든 CSSElementById 작성하는 대신 여러 HTML 요소에 CSS 속성을 설정하는보다 효율적인 방법을 찾고 있어요. querySelectorAll이이 컨텍스트에서 사용하기에 적합한가?

// 크리스

var css = {"backgroundColor": "red","textDecoration": "line-through"}; 
    for (var prop in css) { 
    document.getElementById("update").style[prop] = css[prop]; 
    document.getElementById("save").style[prop] = css[prop]; 
    } 

Answer 1

예, querySelectorAll이 상황에서 사용할 수있는 사용됩니다

var css = {"backgroundColor": "red","textDecoration": "line-through"}; 
var elements = document.querySelectorAll('#update, #save'); 
for (var prop in css) { 
    elements.forEach(function (element) { 
     element.style[prop] = css[prop]; 
    }); 
} 

에게 건의 할 것입니다. IE8 이전 버전에서는 지원되지 않습니다. Check out the MSN docs for some quirks.

또한, querySelectorAll 객체와 같은 배열 (비 라이브 NodeList를)을 반환한다는 것을 알고 그래서 당신은 이러한 구조와 작동하도록 코드를 수정해야합니다 :

var css = {"backgroundColor": "red","textDecoration": "line-through"}; 

var matched = document.querySelectorAll("#update, #save"); 
matched.forEach(function (c){ 
    c.style.backgroundColor css.backgroundColor; 
    c.style.textDecoration = css.textDecoration; 
}); 

Answer 2

나는 다음과 같은 방법을 여기에 querySelectorAll 여러 선택기

Answer 3

document.querySelectorAll을 사용하여 이런 식으로 할 수 있습니다.

/*declare a css class*/ 

.button-css{"backgroundColor": "red","textDecoration": "line-through"}; 

/*in javascript you can do the following*/ 
var buttons=document.querySelectorAll(".buttons"); 

buttons.forEach(function(button){ 
    button.classList.add('button-css'); 
})