Javascript将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(...);

如果你想要一个只将背景颜色改为'＃00FA9A'的功能，请使用：

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

并使用它：

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

Answer 2

我建议把它变成一个功能。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;