HTMLのFORMタグ内に存在するidが付いたdivタグのheightをjavascriptで変更したいのですが、IEでは動作しませんでした。　IEではformタグ内のある特定のdivのheightなどを操作不可能なのでしょうか？　それとも可能であれば方法を教えて頂けますでしょうか。 Firefoxでは動作しております。

( IEはversion 6.0で確認、Firefoxは version 2.0で確認しました)

○ サンプルですがHTMLは以下のようになっております。
<form action="AAA.cgi">
<input type="text" name="firstname" />
<div id="xyz"><input type="text" name="lastname" /></div>
</form>

○ これもサンプルですが、javascriptは以下のようになっております。
// id に 'xyz' を持つタグの高さを 200 に設定
if (document.all) {
document.all("xyz").setAttribute("height",200);
}else{
document.getElementById("xyz").setAttribute("height",200);
}

ちなみに、div タグを form の外に出すと動作しますが、今回は form の中に存在するのが必須条件となります。

以上、宜しくお願い致します。

回答の条件

1人5回まで

登録：2007/02/08 00:08:13
終了：2007/02/09 00:04:43

No.1

kn196729153012007/02/08 01:40:18

50pt

IE の setAttribute は目的どおりの動作はしてくれないので、style.cssText で対処してみてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-Type" content="text/javascript">
<title>タイトル</title>
</head>
<body>
  <form action="AAA.cgi">
    <input type="text" name="firstname" />
    <div id="xyz" style="border-style:double; height:100px">
      <input type="text" name="lastname" />
    </div>
  </form>
  <script>
    if (document.all) {
      document.all("xyz").style.cssText = "border-style:solid; height:200px";
    }else{
      document.getElementById("xyz").setAttribute("style","border-style:solid; height:200px");
    }
  </script>
</body>
</html>

質問内容に重大な抜けがありまして・・・。

は動的に生成されるんです。

なので、質問は FORM内の動的に生成されるタグ(id付き)のheightを変更したいのです。　こちらの方、解りますでしょうか？

2007/02/08 02:30:46

No.2

andalusia134122007/02/08 01:50:52

30pt

if (document.all) {

document.all("xyz").style.height = 200;

}else{

document.getElementById("xyz").style.height = 200;

}

でどうですか？

質問内容に重大な抜けがありまして・・・。

は動的に生成されるんです。

なので、質問は FORM内の動的に生成されるタグ(id付き)のheightを変更したいのです。　こちらの方、解りますでしょうか？

2007/02/08 02:31:41

No.3

まきのっぴ355282007/02/08 02:17:48

50pt

JavaScript の部分を下記の1行に替えれば良いのではないでしょうか?

document.getElementById("xyz").style.height = "200px";

(setAttribute を使うなら～("style", "height:200px;"); かなと思います)

質問内容に重大な抜けがありまして・・・。

は動的に生成されるんです。

なので、質問は FORM内の動的に生成されるタグ(id付き)のheightを変更したいのです。　こちらの方、解りますでしょうか？

2007/02/08 02:32:00

pooh2005 2007/02/08 02:33:45

質問内容に重大な抜けがありまして・・・。
<div id="xyz"></div>は動的に生成されるんです。
なので、質問は FORM内の動的に生成されるid付きのdivタグのheightを変更したいのです。　こちらの方、解りますでしょうか？
kn1967 2007/02/08 02:36:55

動的に生成していると一口に言っても、サーバーサイドでの生成なのかクライアントサイドでの生成なのかすら判らない状態では、どう回答してよいものやら・・・

もう少し具体的な流れのようなものは書けません？
pooh2005 2007/02/08 02:52:25

>kn1967さん

説明不足ですみませんでした。
javascriptで動的に <div id="xyz"></div>が生成されます。
■元のHTML
<form action="AAA.cgi">
<input type="text" name="firstname" />
</form>

■あるボタンをクリックするとjavascriptで動的にdivタグが追加される
<form action="AAA.cgi">
<input type="text" name="firstname" />
<div id="xyz"><input type="text" name="lastname" /></div>
</form>

ここで更に別のボタンをクリックして上記 div タグ (id=xyz) のheightをjavascriptで操作したいのです。

かなりややこしいのに説明下手で申し訳ございません。
pooh2005 2007/02/08 02:58:18

ちなみに、
IEではform内のある特定のid付きのタグにアクセスするには、
formの id とタグのid をカンマで連結してアクセス可能という
のをWebで発見したのですが、
例:
<form id='formtag' action="aaa">
<input type="text" name="firstname" />
<div id="xyz"><input type="text" name="lastname" /></div>
</form>

document.getElementById('formtag.xyz') でアクセス可能。

しかしながら、これは xyz の divタグが静的に記述されている場合であり、
動的にそのdivタグが生成された場合はアクセス不可能
でした・・・。

とりあえず、どんな技、他のタグにidを付与した方法でも結構
ですのでもしお分かりになられれば教えて頂けないでしょうか。

宜しくお願い致します。
kn1967 2007/02/08 03:03:57

あれこれ悩むよりも「javascriptで動的にdivタグが追加される」の部分を参考にして innerHTML.replace で divタグ内にstyleを追記してしまうほうが楽なような気がします。
まきのっぴ 2007/02/08 07:44:15

回答したスクリプトは、対象の div が動的に生成されたかものであるか否かに関係なく使えるはずですが、試してみても動かなかったでしょうか?

> ここで更に別のボタンをクリックして上記 div タグ (id=xyz) のheightをjavascriptで操作したいのです。

であれば、
<button onclick="document.getElementById('xyz').style.height = '200px'">height 変更ボタン</button>
という感じでうまくいくかと。

なお、div 要素に height 属性というものは存在しないので、setAttribute で height を指定しても期待した動作は起こらないはずです。(最初の質問文の例が Firefox で動いたというのは何かの間違いでは)
div 要素ではなく textarea 要素なら height 属性がありますが、div 要素だったらいじるべきは CSS の height プロパティです。
その辺に勘違いがありそうな気がします。
kn1967 2007/02/08 09:38:30

＞div 要素だったらいじるべきは CSS の height プロパティです。

そうなんですよね。動作しなかったんです。
だから動作するコードを作って、コピペで確認してもらえるようにあコード全体を書いたのですが、やってもらってないようなんですよね。
pooh2005 2007/02/08 22:18:13

返答遅くなり申し訳ございません。

あまりややこしい事を書くと返って解りずらくなると思いシンプルな質問に
したつもりだったのですが、返って解りずらくなってしまいすみませんでした。

当方が使用しているのは SWFObject ( http://www.trick7.com/blog/2006/06/15-135235.php ) という flash の swf
ファイルを javascript を用いて動的に html へ挿入するものです。

上記ページのサンプルで、
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.write("flashcontent");
</script>
というのがあるのですが、
<div id="flashcontent"></div>　タグ内にIEの場合は <embed ... > が動的に
生成されFlashコンテンツ(上記サンプルでは movie.swf)がブラウザに表示されます。そしてその動的に生成された embed タグの id が mymovie となります。

ここまでは大丈夫なのですが、本題は、上記サンプルの内容を用いて説明すると、
当方が作成した SWF(上記例でmovie.swf) はあるjavascript を呼び出します。
その javascript は id が mymovie のタグの height 属性の値を変更します。
これもFirefox, IE ともに動作したのですが、問題は
<div id="flashcontent">
This text is replaced by the Flash movie.
</div>
が form タグ内に存在するときです。
例:
<form action="aaa">
<div id="flashcontent">
This text is replaced by the Flash movie.
</div>
</form>

<script....> </script>
ブラウザで閲覧するとflashは表示されるのですが、flashが id に mymovie を持つタグのheight値を変更する javascript を呼び出すと、IEは "mymovie" という名前のオブジェクト(?) は存在しませんのようなエラーを吐きます。
<form> タグに囲まれていないと終始正常に動作します。

かなりややこしくて難しいと思いますが、もしお時間があればご教授お願い
申し上げます。
pooh2005 2007/02/09 00:02:49

解決しました！

flash自体にバグがありました・・・。新しい SWFObjectで対応していました。
(ずっと古いのを使っていました)

いろいろとコメント付けて頂きありがとうございました！