- ベストアンサー
DOM属性の取得
- DOM属性の取得に関するスクリプトでは、最後の9番目の場面でスライドが止まってしまう問題が発生しています。
- 問題の原因はname="anime"が正しく取得できていないか存在していないことです。
- 必要な属性であるname="anime"が効いていない原因について質問しています。
- tonbeisan
- お礼率45% (28/62)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ああ、なるほど。問題がわかりました。 IEはname属性のセットに問題があるようです。 document.getElementById('bb01').innerHTML = '<img name="anime" width="100px" src="'+image1.src+'" />'; これでパスしますね。 DOMで生成したinput要素のname属性がセットされない - 宇宙野武士は元気にしているか http://d.hatena.ne.jp/daisun/20080726/1217070387 一応、cloneNodeで既存ノードをコピーする手法も使えるようです。(name属性ごとコピーできる) ---- function change(){ var anime = document.getElementsByName("anime")[0]; if(i < img.length){ i++; } else { i=0; } anime.src=img[i]; if(i == img.length-1){ var a = document.createElement('a'); a.id = 'AnimeLink'; a.href = 'http://www.trape3.com/ban.html'; a.appendChild(anime.cloneNode(true)); anime.parentNode.replaceChild(a,anime); } else if(i == 0){ var link = document.getElementById('AnimeLink'); link.parentNode.replaceChild(anime.cloneNode(true),link); } } ---- name="anime" が振られると自動的に id="anime" がDOMツリーに表示されるIEの仕様もちょっと気になりますね。 (DOM情報は「IE Developer Toolbar」で確認できます。) ** nameからIDへ ** 今回の場合name属性よりはid属性の方が適切だと思います。 IEは document.anime なんて書き方が出来るようですが、name=anime は同一HTML内に複数持てるのでこの書き方は怪しい。 DOM記法では document.getElementsByName("anime")[0]; と書く必要があります。 IDなら同一HTMLに一つしか持てないので、document.getElementById('Anime'); で良く、一つしかない画像を切り替えるのであればIDを指定した方が効率がいいです。 ** IEの独自記法は使わない方がいいかも ** いろんなところでIEの独自記法が使われていますが、DOM標準の記法に直した方が問題は少ないと思います。 IE7→IE8と進化する過程でWeb標準に合わせる方向で進化しています。 MSは後方互換性には非常に気を遣っているので動かなくなることはないと思いますが、ブラウザの多様性が問われている現在では Firefox、Operaに対応させない理由は少ないと思います。
その他の回答 (2)
- think49
- ベストアンサー率59% (285/482)
#1です。 #1のコードはHTMLが欠けていたので、補足します。 ---- <head> <script type='text/javascript'> (function(){ ... })(); </script> </head> <body> <div style="position: absolute; top: 220px; left:80px" id="bb01"><img id="Anime" src="image02/ani001.jpg" alt="アニメ"></div> </body>
- think49
- ベストアンサー率59% (285/482)
質問者さんのコードをそのままHTMLにして、Firefox3でテストしたら期待通りに動作している、ように見えます。 スライドは止まらず、ループして画像が変わり続けます。ブラウザによって変わるのかな？ とりあえず、コードを短く書き換えてみました。下記コードではどうなるでしょうか？ ------ (function(){ var img = ["image02/ani001.jpg","image02/ani002.jpg","image02/ani003.jpg","image02/ani004.jpg","image02/ani005.jpg","image02/ani006.jpg","image02/ani007.jpg","image02/ani008.jpg","image02/150.jpg"]; var i = 0; function change(){ var anime = document.getElementById('Anime'); if(i < img.length){ i++; } else { i=0; } anime.src=img[i]; if(i == img.length-1){ var a = document.createElement('a'); a.id = 'AnimeLink'; a.href = 'http://www.trape3.com/ban.html'; a.appendChild(anime.cloneNode(true)); anime.parentNode.replaceChild(a,anime); } else if(i == 0){ var link = document.getElementById('AnimeLink'); link.parentNode.replaceChild(anime.cloneNode(true),link); } } function init(){ var timerID = setInterval(change,1000); } if(typeof window.addEventListener == 'function'){ window.addEventListener('load', init, false); } else if(typeof window.attachEvent == 'object'){ window.attachEvent('onload', init); } })();
お礼
非常に丁寧なご解答 ありがとうございます。 たしかに、nameを idに変えるとスライドがうまくいきますね。 id="anime" ですね。 では、それでは何故 name属性を取らないのかという問題が残りますね。不思議ですね。というのは、初めはname属性を取っていて、一回それを削除して、再び置きなおしたら、取らなくなった。うーん、なんでかな。よくわからない。 それと、width="100px\" 属性を、hrefのリンクを貼るときに同時に設定していて、その後で そのwidth属性を削除removeしているんですが、にもかかわらず それがずっと効いている。 これは何を意味するのか。 ということは、 削除されていないということですよね。 ということは、removeによって 属性が削除されていないということなのか。
お礼
大変丁寧な再解答 ありがとうございます。そうですか、IEの バグが原因なんですか。 これからは、idで対応します。 おかげさまで、これでほぼ問題は解決しました。「ほぼ」というのは、 スライドが一回転して、 その後で 途中で それらのの画像の一部のサイズが変化してしまうと言うことがあるからです。 設定した widthがremoveしたにもかかわらず それが効いているのかなと思っていましたが、 widthを初めから外しておいても 同じ現象が起きました。 removeして再設定というのは、どうもいろいろと問題がありのようです。属性nameの件も、removeして再設定というところで起きている問題ですから、 どうも removeして再設定したところで なにかIEのバグが起きてくるのでしょうかね。