Question

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

此语句将正文背景颜色设置为红色。

在我的原始代码中，我有一个函数，它按标记名称将元素分配给全局变量element。我在调用此函数后发现我可以执行此操作：element.style.backgroundColor="#F00";

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

＆＃13;

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

＆＃13;

button { font-family: monospace; }

＆＃13;

<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>

＆＃13;

修改：此问题与How do I add a property to a JavaScript object using a variable as the name?不重复。这个问题包含jQuery，包括我自己在内的很多人都知道。我的问题是基本的JavaScript。另外，我想知道如何向元素添加属性，因此通过将参数传递给函数参数。就我而言，变量使问题进一步复杂化。

Answer 1

我不太确定你的意思＆＃34;代替＆＃34; backgroundColor，但我会猜测您是否尝试以编程方式访问backgroundColor属性。如果是这样，您的第二个功能需要以下修改：

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

因此，如果您拨打attemptStyle('backgroundColor', 'red')，则会将文档的背景颜色设置为红色。

Answer 2

这可能无法回答您的问题，但可以解决您的问题。当鼠标悬停在元素上时，您正尝试更改颜色。这可以通过 CSS

简单地完成

<style>
button {
    background-color:#fff;
}

button:hover {
    background-color: #131519
}
</style>

<button>
function assignStyle(value){}
</button><br />

<button>
function attemptStyle(param,value){}
</button>

如何创建可互换的指令？

2 个答案: