DHTML, テーブルの幅を伸ばすには？

解決済

質問者：yasu182
質問日時：2006/10/30 12:00
回答数：1件

以下の code で一応動くものが出来たのですが、
IE6 だと左下のステータスバーにエラーが出てしまいます。

function setWidth2(pixel) {
calc.style.width = pixel;
}

ここに問題があるようですが、数字を
そのまま入れた場合はだいじょうぶなようです。
直し方が解りますでしょうか？

-------------------

<html>
<head>
<title>[ DHTML ]</title>

<script type="text/javascript">

</script>

<style type="text/css">
.b1 {
color: "#AFEEEE";
font-size: 24px;
text-align: center;
background-color: white;
}
.button8 {
background-color: white;
cursor: pointer;
}
</style>

</head>

<body><center>

<br>

<table border="0" cellspacing="1" cellpadding="10" bgcolor="#cccccc">
<tr>
<td class="button8">Width</td>
<td class="button8" onMouseDown="setWidth(1.0);">100%</td>
<td class="button8" onMouseDown="setWidth(3.0);">300%</td>
</tr>
</table>

<br>

<table bgcolor="#cccccc" id="calc">
<tr>
<td class="b1"></td>
</tr>
</table>

</center></body></html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： yambejp
回答日時：2006/10/30 13:23

setWidth()の１行目

var cur = calc.style.width.substring(0,3);
が初期値を0ではなく""（空）を返していますね。
これをもとにsetWidth2(pixel)を実行しているので
数字以外のpixelが悪さをしているのでしょう

用件としてはpixelが数値だと評価をして実行すればよいので
function setWidth2(pixel) {
if(typeof pixel=="number") calc.style.width = pixel;
}
とするとよいでしょう。
もちろんsetWidthで空データを0と置き換える処理をいれても結構です。

蛇足ですが、idで指定されたcalcオブジェクトを暗黙で処理して
いますが、calc=document.getElementById('calc')などと
明示してやった方がよくないですか？

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！！　うまくいきました^^
calc.style.width はそのオブジェクトの幅を返すと思ってたのですが、
一度設定した後でないと空っぽだったんですね。
結局、onload に

function setSize() {
　setWidth2(w);
}

を入れることで直せました。

getElementById を使った方が後で解り易そうですね。

ちなみに、もう御存知かもしれませんが
こちらの資料は役に立つので参考にしてみてください。

http://msdn.microsoft.com/library/ja/default.asp …