dom 객체를 변수로 정의하는 자바 스크립트

Question

document.getElementById("sgun").style.backgroundColor = "#00FA9A"; 

document.getElementById 및 style.backgroundColor = "# 00FA9A"를 정의하고 싶습니다. 변수로, 그래서 코드가 끔찍한 보이지 않는, 나는 복사 - 붙여 넣기 모든 요소에 대한 필요가 없습니다. 어떻게해야합니까?

Answer 1

당신은 당신을 위해 그것을 ID와 스타일을 가지고 수행하는 함수를 만들 수

좋아 :

function css(id, prop, value){ 
    document.getElementById(id).style[prop] = value; 
} 

후 원하는 사용

css('sgun', 'backgroundColor', '#00FA9A'); 
// css(...); 

그리고 배경색 만 '# 0으로 변경하는 기능을 원한다면 0FA9A '사용이 :

function bg(id){ 
    document.getElementById(id).style.background = '#00FA9A'; 
} 

및 사용은 좋아 :

bg('sgun'); 
bg('someotherid'); 
// ... 

Answer 2

나는이 기능을 만드는 것이 좋습니다.

function changeBgColor(el) { 
 
document.getElementById(el).style.backgroundColor = '#00fa9a'; 
 
} 
 
changeBgColor('foo'); 
 
changeBgColor('bar');

<div id="foo">asdf</div> 
 
<div id="bar">asdf</div>