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

I am modifying the ID of an HTML div element client side with JavaScript. The following code works OK in Internet Explorer but not in Firefox/2.0.0.20. It does work in more recent versions of Firefox.

我正在用JavaScript修改HTML div元素客户端的ID。以下代码在Internet Explorer中可以工作，但在Firefox/2.0.0.20中不行。它在最新版本的Firefox中确实有用。

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

Can anyone tell me:

谁能告诉我:

Why this doesn't work in FireFox.
为什么这在FireFox中不起作用。
How to make this work in FireFox.
如何在FireFox中工作。

To clarify, I'm changing the element ID to reference a different style in an external style sheet. The style is applied in IE but not in FF.

为了澄清，我将元素ID更改为引用外部样式表中的不同样式。这种风格适用于IE，但不适用于FF。

3 个解决方案

#1

It does work in Firefox (including 2.0.0.20). See http://jsbin.com/akili (add /edit to the url to edit):

它在Firefox中工作(包括2.0.0.20)。参见http://jsbin.com/akili(添加/编辑到要编辑的url):

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

The first click changes the id to "two", the second click errors because the element with id="one" now can't be found!

第一次单击将id更改为“2”，第二次单击错误，因为id=“1”的元素现在无法找到!

Perhaps you have another element already with id="two" (FYI you can't have more than one element with the same id).

也许您已经有了id="two"的另一个元素(顺便说一下，您不能有超过一个具有相同id的元素)。

#2

That seems to work for me:

这似乎对我有用:

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

The expected behaviour is to change the colour of the word "fruit".

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

Perhaps your document was not fully loaded when you called the routine?

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

#3

You can modify the id without having to use getElementById

您无需使用getElementById即可修改该id。

Example:

例子:

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

You can see it here: http://jsbin.com/elikaj/1/

您可以在这里看到:http://jsbin.com/elikaj/1/

Tested with Mozilla Firefox 22 and Google Chrome 60.0

测试了Mozilla Firefox 22和谷歌Chrome 60.0。

#1