在变量引用中使用函数参数

Question

我知道这很幼稚，但我正在尝试做这样的事情：

var add01in = "#fff";
var add01out = #000";

function over(id) {
  var dupe = id.attr('id')
  id.style.backgroundColor = (dupe + 'in');
}

function out(id) {
  var dupe = id.att('id');
  id.style.backgroundColor = (dupe + 'out');
}

<div id="add01" onmouseover="over(this)" onmouseout="out(this)">Hello World!</div>

所以我想要它，当用户将鼠标悬停在 ID =“add01”的 div 上时，颜色会更改为变量“add01in”的值。当他们将鼠标移出时，它会更改为“add01out”的值。

唯一的问题是，我终其一生都无法弄清楚如何将“in”和“out”这两个词添加到参数 ID 的末尾。

例如，onmouseover 应该使 id.style.backgroundColor = add01in （如在 var 中）然后等于 var 的值，所以 #fff

很抱歉让这个变得如此神秘。欢迎任何帮助...或替代方案，但目前我找不到任何解决方法，因为我需要大量使用该功能，并且需要改变颜色等。

Answer 1

您可以将对象用于 id 的颜色及其状态。并使用over/out的参数作为id。

var color = {
    add01in: "#fff",
    add01out: '#000'
};

function over(id) {
    document.getElementById(id).style.backgroundColor = color[id + 'in'];
}

function out(id) {
    document.getElementById(id).style.backgroundColor = color[id + 'out'];
}

<div id="add01" onmouseover="over('add01')" onmouseout="out('add01')">Hello World!</div>

Answer 2

首先，att 无效。也许.getAttribute？其次，你试图用变量名来引用一个变量，这不是你可以用 JS 做的。改为使用对象：

var colors = {
    add01in: '#fff',
    add01out: '#000'
}

这样你就可以引用它们了

id.style.background = colors[dupe + 'in'];

但是你应该真的真的使用 CSS 来做这种事情。

Answer 3

如果你想改变文字颜色：

var t = document.getElementById('add01');
var overColor = '#585858';
var outColor = '#000';

t.addEventListener('mouseover', function (event) {
    t.style.color = overColor;
});

t.addEventListener('mouseout', function (event) {
    t.style.color = outColor;
});

如果你想改变背景颜色

var t = document.getElementById('add01');
var overColor = '#585858';
var outColor = '#000';

t.addEventListener('mouseover', function (event) {
    t.style.background = overColor;
});

t.addEventListener('mouseout', function (event) {
    t.style.background = outColor;
});

不认为您需要使用 ID 进行插值是吗？我认为您在这里的挂断没有意识到您可以将引用（在我的示例中为变量t）保存到您要操作的元素。我认为这就是为什么您实际上是在尝试使用 ID 来模拟某种内省来查找 var 名称。

关于 CSS——你可以使用它，但是你必须确保你想要的所有颜色在样式表中都有类。如果您正在寻找更多的动态控制，我可以理解您为什么要这样做。如果颜色永远不会改变，那么创建一个 CSS 类：

.mouse-over { color: #fff; }

只需使用classList API 在事件处理程序中添加/删除它，can read about on MDN.