Javascriptでボタンを押すとテキストエリアの高さが可変するものを作っています。

IE6やoperaでは動くのですがFirefox3やその他のブラウザでは動きません。
以下にソースを示しますので、おかしい箇所の指摘・アドバイスをお願いします。

function height_change(type){
if(type=="up"){
height_size = document.getElementById("edit").clientHeight+50;
}else
if(type=="dw"){
height_size = document.getElementById("edit").clientHeight-50;
}
document.getElementById("edit").style.height = height_size;
}

※実際に動作させた上でのご回答をお願いします

回答の条件
  • 1人2回まで
  • 登録:2009/01/20 00:53:25
  • 終了:2009/01/24 09:09:10

回答(4件)

id:kent0608 No.1

kent0608回答回数220ベストアンサー獲得回数232009/01/20 02:59:40

ポイント20pt

自力でクロスブラウザを実現するのは骨が折れます。

ここは素直にjQueryを使いましょう。

http://jquery.com/

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script>
	$(function(){
		$("#up_btn").click(function(){
			$("#tarea").css("height","500px");
		});
		$("#dwn_btn").click(function(){
			$("#tarea").css("height","200px");
		});
	});
</script>
</head>
<body>
		<textarea id="tarea"></textarea><br />
		<button id="up_btn">up</button>
		<button id="dwn_btn">down</button>
</body>

id:k27w

jqueryを使う事に抵抗はありませんが、「なぜそうなるのか」がわからないのに使う事には抵抗ありますね。。ソースをコピーして貼るだけでは問題があった時に対処できないし。


ちなみに上記のソースをそのまま貼りましたが動きませんでした。

2009/01/20 11:04:28
id:Reiaru No.2

Reiaru回答回数152ベストアンサー獲得回数382009/01/20 12:15:51

ポイント60pt
document.getElementById("edit").style.height = height_size;

             ↓

document.getElementById("edit").style.height = height_size+"px";

単純にこれで宜しいかと思います。

id:k27w

出来ました!

safariやGoogle Chromeなど、他のブラウザでも伸縮できました。


原因は「単位を付けていない」事だったんですね・・。非常に参考になりました。

2009/01/24 09:08:24

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 GoldenDawn 426 399 81 2009-01-20 12:37:29
2 MORIYAMA Hiroshi 21 16 8 2009-01-21 04:27:33
  • id:kent0608
    jquery-1.2.6.js をhtmlファイルと同階層に置いても動きませんか?
    IE8beta Firefox3 で動作を確認してから回答したのですが・・・
  • id:kent0608
    また、質問の原因はこちらのURLが参考になるかと思います。
    http://ziddy.japan.zdnet.com/qa2504264.html
  • id:kent0608
    ※現在のjQuery最新バージョンは1.3.0ですね。
    適宜参照名を変更してください。
  • id:kent0608
    中途半端な位置から抜粋したので</head>タグが紛れ込んでいましたね・・・申し訳ない
    以下、全HTMLソースです。
    >||
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuerytest</title>
    <script type="text/javascript" src="jquery-1.2.6.js"></script>
    <script>
    $(function(){
    $("#up_btn").click(function(){
    $("#tarea").css("height","500px");
    });
    $("#dwn_btn").click(function(){
    $("#tarea").css("height","200px");
    });
    });
    </script>
    </head>
    <body>
    <textarea id="tarea"></textarea><br />
    <button id="up_btn">UP</button>
    <button id="dwn_btn">down</button>
    </body>
    </html>
    ||<
  • id:k27w
    せっかくコメントをいただきましたが、jQueryよりも質問の内容に対する回答が目的ですので、上記のテストは行いません。ご了承下さい。

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

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

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

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