如何创建可互换的说明

How can I create interchangeable instructions?

本文关键字：可互换 说明 创建 何创建      更新时间：2023-09-26
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有关。另外，我想知道如何将属性添加到元素，从而通过将参数传递给函数参数。就我而言，变量使问题进一步复杂化。

我不太确定你所说的"替换"backgroundColor是什么意思，但我敢打赌你正在尝试以编程方式访问backgroundColor属性。如果是这样，您的第二个函数需要以下修改：

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

因此，如果您调用attemptStyle('backgroundColor', 'red')，则将使文档的背景色变为红色。

这可能无法回答您的问题，但可以解决您的问题。您正在尝试在鼠标悬停在元素上时更改颜色。这可以简单地用CSS完成

<style>
button {
    background-color:#fff;
}
button:hover {
    background-color: #131519
}
</style>
<button>
function assignStyle(value){}
</button><br />
<button>
function attemptStyle(param,value){}
</button>
相关文章：