DOMオブジェクトを変数として定義するJavaScript

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>