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

Using Function Argument within a Variable Reference

本文关键字：函数 参数 变量 引用      更新时间：2023-09-26

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

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

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

您可以使用对象来表示 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>

首先，att无效。也许.getAttribute？其次，您尝试引用具有变量名称的变量，这不是您可以使用 JS 执行的操作。请改用对象：

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

这样，您可以引用它们

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

但是，您应该真正使用CSS进行此类操作。

如果要更改文本颜色：

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;
});

如果要更改BG颜色

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 在事件处理程序中添加/删除它，您可以在 MDN 上阅读。

相关文章：