Javascript ein dom-Objekt als eine Variable definieren

Question

Ich möchte document.getElementById und style.backgroundColor = "# 00FA9A" definieren; als eine Variable, so sieht der Code nicht schrecklich aus, und ich muss das nicht für jedes Element kopieren. Wie mache ich das?

Answer 1

Sie könnten nur eine Funktion machen, die eine ID und einen Stil nehmen und machen es für Sie mögen:

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

und dann verwenden Sie es mögen:

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

Und wenn Sie eine Funktion möchten, die nur die Hintergrundfarbe auf '# 0 ändert 0FA9A‘verwenden diese:

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

und verwenden Sie es mögen:

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

Answer 2

Ich würde empfehlen, es zu einer Funktion zu machen.

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

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