如何创建可互换的指令？

Question

document.body.style.backgroundColor="#F00";

此语句将主体背景颜色设置为红色.

在我的原始代码中,我有一个函数,它通过标记名称将元素分配给全局变量element.我在调用此函数后发现我可以这样做:element.style.backgroundColor="#F00";

但是,似乎没有任何方法可以替代声明的属性部分.下面我已经提出了最明显的方法,尽管我也尝试将参数分配给变量和各种报价组合.

function assignStyle(value) {
  document.body.style.backgroundColor = value;
}

function attemptStyle(property,value) {
  document.body.style.property = value;
}

button { font-family: monospace; }

<button onmouseover="assignStyle('#131519');" onmouseout="assignStyle('#FFF');">
  function assignStyle(value){}
</button><br />

<button onmouseover="attemptStyle('backgroundColor','#137619');" onmouseout="attemptStyle('backgroundColor','#FFF');">
function attemptStyle(property,value){}
</button>

编辑:这个问题不是重复如何使用变量作为名称向JavaScript对象添加属性？.这个问题包含jQuery,包括我自己在内的很多人都知道.我的问题是基本的JavaScript.另外,我想知道如何向元素添加属性,因此通过将参数传递给函数参数.就我而言,变量进一步使问题复杂化.

Answer 1

我不太确定你所说的"替换"是什么意思backgroundColor,但是我猜你试图以backgroundColor编程方式访问该属性.如果是这样,您的第二个功能需要以下修改:

function attemptStyle(property,value){
  document.body.style[property]=value;
}

因此,如果您打电话attemptStyle('backgroundColor', 'red'),您将使文档的背景颜色变为红色.