2009-10-30 21 views
24

要素クライアント側のHTML divのIDをJavaScriptで変更します。次のコードは、Internet Explorerでは正常に動作しますが、Firefox/2.0.0.20では動作しません。より最近のバージョンのFirefoxでも動作します。JavaScriptを使用してHTML要素のIDを変更するにはどうすればよいですか?

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

誰も教えてもらえます:

  1. これはFirefoxで動作しないのはなぜ。
  2. この作業をFireFoxで行う方法。

明確にするために、外部スタイルシートで別のスタイルを参照するように要素IDを変更しています。スタイルはIEでは適用されますが、FFでは適用されません。

+2

でテストhttp://jsbin.com/elikaj/1/

をあなたはfirefoxで見つかるはずです - あなたはそうではないと思いますか? – Greg

+1

これはFirefoxでうまく動作しますが、JavaScriptエラーが発生していますか?より多くのコード例を投稿できますか? –

+0

Firebugをダウンロードし、コンソールウィンドウに何のエラーがスローされているかを見てください –

答えて

33

Firefoxで動作します(2.0.0.20)。 http://jsbin.com/akiliが(編集するURLに/editを追加)を参照してください:

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

最初のクリックがid"two"に、第2のクリックでエラーが変更id="one"を持つ要素が今見つけることができないので!

が既にであり、id="two"(FYI you can't have more than one element with the same id)である可能性があります。私のために働くようだ

+1

+1例をアップロードする場合 – Seb

7

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

期待される動作は、単語「果物」の色を変更することです。

おそらく、ドキュメントを読み込んだときにドキュメントが完全に読み込まれていない可能性がありますか?

+0

最新の編集を表示します。 – Tesseract

3

あなたはgetElementById

例を使用することなく、idを変更することができます。

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

あなたがここでそれを見ることができます:Mozilla Firefoxの22とGoogle Chromeの60.0

関連する問題