Question

如果我们有以下代码

<ul>
    <li id='car'>ok</li>
    <li id='color'>dd</li>
</ul>

我可以使用以下代码直接应用名称属性

car.setAttribute('name', 'bmw');

但是，如果我想在汽车的位置使用变量怎么办。

var z = 'car';
z.setAttribute('name', 'bmw');

这不起作用。或者更难，使用两者怎么样？

var z = 'r';
ca + z.setAttribute('name', 'bmw');

也不起作用。

这可能吗？

Answer 1

使用document.getElementById查找元素：

document.getElementById(c).setAttribute('name', 'car');

document.getElementById('ca' + c).setAttribute('name', 'car');

Answer 2

您似乎依赖于浏览器为具有id（我强烈建议）的元素创建的自动全局变量。如果是这样，您可以使用window对象：

来完成

var c = 'car';
window[c].setAttribute('name', 'car');

var ca = 'ca';
window[ca + 'r'].setAttribute('name', 'car');

所有全局变量都是全局对象的属性，您可以在浏览器上以window访问它们。（实际上，window本身是全局对象的属性，它用于引用自身。）在JavaScript中，您可以使用点表示法和文字名称（obj.foo来引用对象上的属性。），或括号内的表示法和字符串名称（obj["foo"]）。在后一种情况下，字符串可以是任何表达式的结果，包括变量查找。

我不建议依赖自动全局变量，但是，全局命名空间真的拥挤，而其他事物（声明的变量，函数）可能会影响元素。请改用getElementById：

var c = 'car';
document.getElementById(c).setAttribute('name', 'car');

var ca = 'ca';
document.getElementById(ca + 'r').setAttribute('name', 'car');

附注：name不是li elements的有效属性。

Answer 3

你不能（不诉诸eval）通过字符串访问本地变量。

你可以（但不应该）用全局变量来做，或者如果有问题的变量实际上是另一个对象的属性（前者是一个特例，因为全局变量实际上是window对象的属性），即：

var o = {};
o.car = document.getElementById('car');
o.color = document.getElementById('color');

var c = 'car';
o[c].setAttribute('name', 'bmw');

在对象赋值中使用变量作为值 - JavaScript

3 个答案: