Question

我正在使用JavaScript修改HTML div元素客户端的ID。以下代码在Internet Explorer中正常工作，但在Firefox / 2.0.0.20中无效。它适用于更新版本的Firefox。

document.getElementById('one').id = 'two';

任何人都可以告诉我：

为什么这在FireFox中不起作用。
如何在FireFox中完成此工作。

为了澄清，我正在更改元素ID以引用外部样式表中的不同样式。样式在IE中应用，但不在FF中。

Answer 1

它适用于Firefox（包括2.0.0.20 ）。请参阅http://jsbin.com/akili（将/edit添加到要修改的网址）：

<p id="one">One</p>
<a href="#" onclick="document.getElementById('one').id = 'two'; return false">Link2</a>

第一次点击会将id更改为"two"，第二次点击错误，因为现在无法找到id="one"的元素！

也许你有另一个元素已经 id="two"（仅供参考you can't have more than one element with the same id）。

Answer 2

这似乎对我有用：

<html>
<head><style>
#monkey {color:blue}
#ape {color:purple}
</style></head>
<body>
<span id="monkey" onclick="changeid()">
fruit
</span>
<script>
function changeid ()
{
var e = document.getElementById("monkey");
e.id = "ape";
}
</script>
</body>
</html>

预期的行为是改变“水果”这个词的颜色。

调用例程时，您的文档可能没有完全加载？

Answer 3

您可以修改id，而无需使用getElementById

示例：

<div id = 'One' onclick = "One.id = 'Two'; return false;">One</div>

您可以在此处查看：http://jsbin.com/elikaj/1/

使用Mozilla Firefox 22和Google Chrome 60.0进行测试

如何使用JavaScript更改HTML元素的ID？

3 个答案: