web-dev-qa-db-fra.com

Comment changer l'ID d'un élément HTML avec JavaScript?

Je modifie l'ID d'un côté client de l'élément HTML div avec JavaScript. Le code suivant fonctionne correctement dans Internet Explorer mais pas dans Firefox/2.0.0.20. Il fonctionne dans les versions plus récentes de Firefox.

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

Quelqu'un peut-il me dire:

  1. Pourquoi cela ne fonctionne pas dans FireFox.
  2. Comment faire fonctionner cela dans FireFox.

Pour clarifier, je change l'ID d'élément pour référencer un style différent dans une feuille de style externe. Le style est appliqué dans IE mais pas dans FF.

javascripthtmlcross-browser
31
Tesseract

Cela fonctionne dans Firefox (, y compris 2.0.0.20). Voir http://jsbin.com/akili (ajoutez /edit à l'url à modifier):

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

Le premier clic change le id en "two", les erreurs du deuxième clic parce que l'élément avec id="one" maintenant introuvable!

Peut-être que vous avez déjà un autre élément avec id="two" (FYI vous ne pouvez pas avoir plus d'un élément avec le même id ).

44
Roatin Marth

Cela semble aller pour moi:

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

Le comportement attendu est de changer la couleur du mot "fruit".

Peut-être que votre document n'était pas entièrement chargé lorsque vous avez appelé la routine?

11
user181548

Vous pouvez modifier le id sans avoir à utiliser getElementById

Exemple:

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

Vous pouvez le voir ici: http://jsbin.com/elikaj/1/

Testé avec Mozilla Firefox 22 et Google Chrome 60.0

5
nimday