javascript - 如何创建可互换的指令?

标签 javascript html css

<分区>

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>

编辑: 这个问题不是 How do I add a property to a JavaScript object using a variable as the name? 的重复问题. 这个问题包含 jQuery,包括我在内的许多人对它一无所知。我的问题与基本的 JavaScript 有关。另外,我想知道如何向元素添加属性,以及如何将参数传递给函数参数。就我而言,变量使问题进一步复杂化。

最佳答案

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

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

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

关于javascript - 如何创建可互换的指令?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35109817/

上一篇:html - CSS 不工作或更改图像大小

下一篇:javascript - 如何根据选中的复选框显示表格行

相关文章:

javascript - 递归删除所有具有空值的 JSON 键,如果所有子键都被删除,则删除父键

javascript - 从基本 Slider jquery 获取值

html - CSS Unicode 复选标记/刻度在 Windows 8.1/Firefox 版本 32 中变为绿色/红色

css - 为什么我的 <div> 离开它们的父级 <div>?

javascript - JS 按类查找一个元素(如果存在),否则使用 or 运算符使用其他元素

javascript - 使用 Promise 确保文件流已结束

javascript - 在 Javascript 中可靠地将标签添加到 <head>

javascript - Shadow DOM,使用目的

javascript - 使用 AJAX 在 PHP 中空白 $_POST var

html - CSS 检查图标 (i) 是在按钮内的文本之前还是之后