Question

我知道这很天真，但我尝试做这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

所以我想要它，当用户使用ID =＆＃34; add01＆＃34;来鼠标移动div时，颜色变为任何变量的值＆＃34; add01in＆＃34;是。当他们使用鼠标输出时，它会更改为＆＃34; add01out＆＃34;。

的值

唯一的事情就是我不能为我的生活弄清楚如何获得“＆＃39;和＆＃39; out＆＃39;添加到参数ID的末尾。

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

抱歉让这么神秘。任何帮助都是受欢迎的...或替代方案，但此时我无法找到任何方法，因为我需要使用该功能很多时间，并且颜色会发生变化等。

Answer 1

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

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

这样你可以用

引用它们

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

HOWEVER 你应该真的，真的使用CSS来做这类事情。

Answer 2

如果您想更改文字颜色：

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

只需使用您can read about on MDN.

的classList API在事件处理程序中添加/删除它

Answer 3

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

＆＃13;

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'];
}

＆＃13;

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

＆＃13;

在变量引用

3 个答案: