重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

IMGタグごとにCSSを設定する方法

解決済

  • 質問者：yamaguchi_eiji
  • 質問日時：
  • 回答数：1件

自分でGoogleやYahoo検索をしても見つけられなかったので、どなたかお教えください。

現在、HTML内に以下のようにIMGタグで画像添付しています。
--------
<img src="***" width="160" height="140" /><br />
<img src="***" width="32" height="30" />
<img src="***" width="32" height="30" />
<img src="***" width="32" height="30" />
--------
最初に大きな画像を表示し、その下に並列するかたちで小さいサムネイルを並べています。

普段はCSSでレイアウトをして、画像それぞれにstyle属性やclass、ID属性などを付けています。それが、今回は上述のHTMLを外部サイトのPHPから出力しているもので、一切触れない（編集できない）状態にあります。

このような状態の場合でも、画像それぞれにCSSを設定することは可能なのでしょうか？最低限の希望は、大きい画像（160px*140px）をひとかたまり、サムネイル画像（32px*30px）をひとかたまりとして、それぞれのかたまりにCSSを設定できれば良いと思っています。

可能であればHTML＋JavaScript＋CSSで実現できる方法を希望します。
どなたかお教えください。よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： mizuno3
  • 回答日時：

<html>


<style type="text/css">
.img160 {
border: 10px solid #FF0000;
}
.img32 {
border: 5px solid #0000FF;
}
</style>
<div id="php_write">
<img src="***" width="160" height="140" /><br />
<img src="***" width="32" height="30" />
<img src="***" width="32" height="30" />
<img src="***" width="32" height="30" />
</div>


<script type="text/javascript">
var obj = document.getElementById('php_write');
var a = obj.getElementsByTagName('img');
var l = a.length;


for(var i=0; i < l; i++) {
var w = a[i].getAttribute('width');
a[i].setAttribute('class','img' + w);
a[i].setAttribute('className','img' + w);
}
</script>
</html>

こんなのはいかがでしょうか
    • good
    • 0
    • 件
通報する
この回答へのお礼

mizuno3様
とても迅速なご回答のうえ、丁寧にソースをくださり大変参考になりました。ありがとうございます。

記載されたソースをコピーして試してみたところ、元のHTMLタグ部分を編集せずにCSSを設定することができました。できないものだとばかり思っていたのでできたことに驚いています。
mizuno3様に深く感謝いたします。

この度は貴重なお知恵をくださり、ありがとうございました。
またの機会があります際は、その際も是非よろしくお願いいたします。

通報する
お礼日時：2007/01/16 14:15

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報