- ベストアンサー
<img>タグを<span>でくくりたい
- <img>タグをgetElementsByTagNameで取得し、<span class="align_left"><img .... /></span> みたいに囲いたいと考えています。
- 条件として、<img>タグの親ノードは<p>タグです。
- 全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか？
- brosis
- お礼率94% (100/106)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
// この後... out_span.appendChild(img.parentNode.replaceChild(out_span, img)); nodeObject.parentNode http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/Core/Node.html#Node-parentNode nodeObject.replaceChild( newChild, oldChild ) http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/Core/Node.html#Node-replaceChild nodeObject.appendChild( newChild ) http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/Core/Node.html#Node-appendChild
その他の回答 (3)
- my--
- ベストアンサー率89% (91/102)
補足的に。 setAttributeのIE6実装は何かと問題があるようですから classNameプロパティで設定した方が良いです。 生成直後の要素なら値がないのは分かってますから、単純な代入で済みます。 以上です。
お礼
はい。 IE6 は今、環境的に確認できませんが、 のち検証したいと思います。 詳細まで教えていただき、本当にありがとうございました。
- my--
- ベストアンサー率89% (91/102)
>> No.1 補足 「初心者を脱出したい」のなら「ソースの表示」で確認していてはダメです。 的外れな質問、補足を繰り返すことになりますから「Firebug」などで検索して DOMを確認できる環境を整えるようにして下さい。
お礼
はい。 その後、 <style> span.align_left { float: left; margin: 20px 20px; } などで、class属性が効いていることを確認しました。 Firebug など、これから習得したいと思います。 アドバイスありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
classの設定は昔から鬼門ですね、こまかいことに目をつむればダイレクトに .classNameをいじってしまうとかもありですが、まぁこだわるとブラウザの 依存を考慮しながらの処理になるでしょう <style> span.align_left{ color:red; } </style> <script> window.onload = function() { var list = document.getElementsByTagName('img'); for(var i=0;i<list.length;i++){ var img=list[i]; var out_span = document.createElement('span'); out_span.appendChild(img.cloneNode(true)); var alt=img.getAttribute('alt'); if(alt) out_span.appendChild(document.createTextNode(alt)); out_span.className='align_left'; img.parentNode.replaceChild(out_span,img); } } </script> <h1> IMGタグに親ノードを追加したい </h1> <p> test <img src="1.jpg" alt="alt1"> <img src="2.jpg" alt="alt2"> <img src="3.jpg"> test </p>
お礼
前回の質問に続けて、回答いただき大変に感謝します。 ご提示いただいた、スクリプトが動くことを確認しました。 まだ、コードの内容は理解していませんが、 やりたいことの道筋となると思います。 本当にありがとうございます
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
夜おそくまで回答いただきありがとうございます。 Chrome13 で、成功することを確認しました。 質問の趣旨が変わってしまうのですが、 IE6, FireFox6で、以下のattribute設定をためしたところいずれも成功しません。 out_span.setAttribute('class', 'align_left'); // Chrome Ok out_span.setAttribute('className', 'align_left'); //Chrome Ok, But classname="align_left" out_span.className = "align_left";// IE6,FF6 Ng 一方、DOMツリーに既存の要素の class属性値を変更するには、 //IE6 Ok elem.setAttribute( 'className', 'foo'); //FF6, Chrome13 Ok elem.setAttribute( 'class', 'foo'); で出来ました。 DOMツリーに追加する前のオブジェクトに、class属性を追加する場合、 IE6 では何か特別なことをする必要があるのでしょうか？
補足
すみません。お礼の後、setAttribute関係のスクリプトを外して実行したところ、単なる<span></span>で囲われることを期待したのですが、そうなりませんでした。（IE6と7, FireFox3.6） ブラウザで「ソースの表示」 で確認しているのですが、 <span>タグが追加されておりません。 原因は、class属性の追加ではなく、提供頂いた、 out_span.appendChild(img.parentNode.replaceChild(out_span, img)); にブラウザ間の互換性に問題があるのでしょうか？