人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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;
}

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

●質問者: k27w
●カテゴリ:ウェブ制作
✍キーワード:dW IE6 JavaScript opera アドバイス
○ 状態 :終了
└ 回答数 : 2/4件

▽最新の回答へ

1 ● kent0608
●20ポイント

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

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

◎質問者からの返答

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


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


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

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

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

◎質問者からの返答

出来ました!

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


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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ