【javascript/Movable Type/Opera Mobile/解決で500pt】id属性にhogeという値を持つdiv要素の配下の、全てのimg要素の中で規定の最大サイズ(とりあえず300px)を超えるimg要素を最大サイズに縮小する、つまり


div#hoge┬ p - img(width:480px ○)
      ├ p - img(width:480px ○)
      └ table - img(width:105px ×)
(○は幅300pxに縮小、×はそのままのサイズで)

ということを実現したいです。個人でやってるblog(Movable Type)なんですが、最近「iPhoneテンプレート for MT」というものを導入しまして・・・個別記事ページのimg要素を一括して縮小表示したいと。javascriptでできそうだと当たりをつけたのはよかったんですが、全くといっていいほど知識がありません。

このページ(http://tinyurl.com/6pesad)を参考に

<script language="javascript">
var img = document.getElementTagName("img");
if(img.getAttribute("width") > 300){
img.setAttribute("width",300);
}
</script>

以上のようなものを書いてみたんですが、動きませんでした。どなたかコードずばり、もしくはヒントだけでもください!。

上記のツリー図の構成は(http://tinyurl.com/63jms8)から例として引っ張ってきました。

回答の条件
  • 1人2回まで
  • 登録:2008/08/20 14:10:07
  • 終了:2008/08/20 15:25:15

ベストアンサー

id:Mars No.1

Mars回答回数203ベストアンサー獲得回数202008/08/20 14:40:06

ポイント500pt

こんなんでどうでしょう。

var IMG=document.getElementById('hoge').getElementsByTagName('img');
for(var i=0;IMG[i];i++) {
	if(IMG[i].width > 300) {
		IMG[i].style.width='300px';
		IMG[i].style.height='auto';
	}
}
id:melondog

うれしいです!動作しました!このコードを読めるように勉強しようと思います。

一つ教えて欲しいのですが、このスクリプトを記述する場所はHTMLの下のほう(img要素が出尽くした後)でいいのでしょうか。それとも外部ファイルとしてjsファイルを読み込ませてやった方がいいのでしょうか?

2008/08/20 15:07:09
  • id:Mars
    下の方、対象とする全てのimgより後におきます。
    外部ファイル化した方がスマートだと思います。

    あまりハンパな場所に書いてもソースが汚くなるのでhogeの後ろあたりがいいかと思います。(あるいは </body>の直前)


    <div id="hoge">
    </div>
    <script type="text/javascript" src="外部ファイル.js"></script>
    </body>
  • id:melondog
    最初に回答をいただいてから、コメントをいただくまでの間に

    <script language="javascript">
    window.onload = function() {
    var IMG=document.getElementById('hoge').getElementsByTagName('img');
    for(var i=0;IMG[i];i++)

    {
    if(IMG[i].width > 300) {
    IMG[i].style.width='300px';
    IMG[i].style.height='auto';
    }
    }
    }
    </script>

    こんなコードを<head>~</head>内に記述して、一応動くには動いたんですが、
    これってケッタイな書き方なんでしょうか?
  • id:Mars
    ケッタイではないです。ページのロード完了時にスクリプトを実行したい時によくやる方法です。
    今回のケースでいえば、少しでも早いタイミングで実行したほうがいいかと思って前コメントのような方法を紹介しましたが、onloadでも問題は別にないです。
  • id:melondog
    返事遅れましたが、改めてお付き合いいただいてありがとうございました!「Javascript 実行のタイミング」で検索したらいろいろなページがヒットして読んでいるところです。これから書籍も購入してみます!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません