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

Question

k27w

56

48もっと見る

80pt

ウェブ制作

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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

	回答者	回答	受取	ベストアンサー	回答時間
1	GoldenDawn	426回	399回	81回	2009-01-20 12:37:29
1	GoldenDawn
2	MORIYAMA Hiroshi	21回	16回	8回	2009-01-21 04:27:33
2	MORIYAMA Hiroshi

kent0608 2009/01/20 16:23:07

jquery-1.2.6.js をhtmlファイルと同階層に置いても動きませんか？
IE8beta Firefox3 で動作を確認してから回答したのですが・・・
kent0608 2009/01/20 17:17:04

また、質問の原因はこちらのURLが参考になるかと思います。
http://ziddy.japan.zdnet.com/qa2504264.html
kent0608 2009/01/20 17:23:45

※現在のjQuery最新バージョンは1.3.0ですね。
適宜参照名を変更してください。
kent0608 2009/01/20 17:30:50

中途半端な位置から抜粋したので</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>
||<
k27w 2009/01/24 09:10:38

せっかくコメントをいただきましたが、jQueryよりも質問の内容に対する回答が目的ですので、上記のテストは行いません。ご了承下さい。

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

kent0608 · Answer 1 · 2009-01-20T02:59:40+09:00

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

ここは素直に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>

Reiaru · Answer 2 · 2009-01-20T12:15:51+09:00

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

　　　　　　　　　　　　　↓

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

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

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

回答（4件）

kent0608220232009/01/20 02:59:40

Reiaru152382009/01/20 12:15:51

質問者が未読の回答一覧

コメント（5件)

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