こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

Javascriptの質問です。

Javascriptの質問です。

昨日からjavascriptを始めた初心者なのですが、すみませんが、以下のコードの不具合の訂正をお願いしたいのです。自分なりにあれこれやっては見ましたが、結論が見出せません。

昨日は、id="BOX" の部分を、windowをリサイズしたときに、縦横常に中央に表示させるといったものです。

問題点:
(1)windowをリサイズたときに、動かない点
(2)DOCTYPE宣言すると、まったく機能しない。(DOCTYOE宣言とJAVASCRIPTの対応が理解できていないので。。とりあえず、DOCTYPE宣言無しでも機能すればいいかな?と思っております。IE8とfirefox3での表示を目指しています。)

恐れ入りますがよろしくお願いいたします。


■HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>

<link href="css/test1.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
<!--
function changeStyle(y,x)
{
/*変数トレース*/
document.write("関数CALL\n");
document.write(y+"/");
document.write(x);

/*CSSの書き換え(CSS)を書き換えると位置をへんこうできるものと思っています。*/
document.getElementById("box").style.marginTop = y;
document.getElementById("box").style.marginLeft = x;

}
// -->
</script>

<script type="text/javascript">
<!--
function relocate()
{
window.focus();

/*firefoxのwindowサイズとboxの大きさによりマージンを計算*/
if( 0 != window.innerHeight && window.innerHeight > 960){
y=((window.innerHeight - 960)/2);
}else{y=0;}


/*IEのwindowサイズとboxの大きさによりマージンを計算*/
if( 0 != window.innerWidth && window.innerHeight >1100){
x=((window.innerWidth - 1100)/2);
}else{x=0;}


/**/
if( 0 != document.body.clientHeight && document.body.clientHeight > 960){
y=((document.body.clientHeight - 960)/2);
}else{y=0;}

if(0 != document.body.clientWidth && document.body.clientWidth > 1100){
x=((document.body.clientWidth - 1100)/2);
}else{x=0;}

/*CSSの変更*/
changeStyle(y,x);

}
//-->
</script>

</head>

<body onResize="relocate()">
<!-- イベントハンドラセット(リサイズ時にCSS変更)こちらが問題のようです。 -->


<div id="box">123456</div>
<!-- 目的のボックス-->


<script type="text/javascript">
<!--
/*オンロード時に1度CSSを変更する。もちらは動作します。*/
relocate();
// -->
</script>

</body>
</html>


■CSS
@charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;

}

#box {
background-color: #FF3300;
height: 960px;
width: 1100px;
border: 100px none #999999;
margin-top:0px;
margin-left:0px;
}

よろしくお願いします。

投稿日時 - 2010-08-12 10:36:40

QNo.6104036

すぐに回答ほしいです

質問者が選んだベストアンサー

(1)の動かない
というのは具体的にどうなるのかを書いておいた方がいいかと思います。
エラーになるのか、関数自体は呼び出されているけど期待通りの結果にならないのか等で全然違いますので。
ちなみに、document.writeをすると元々のHTMLの要素は消えてしまいますので、間違いなくエラーになります。

changeStyle内のdocument.writeを消せば当方の環境のIE8とFireFox3.6.3では動きました。
ただ、自分のマシンの画面が小さいのでdivのサイズだけ小さく変更しましたが。

投稿日時 - 2010-08-13 10:45:16

お礼

複雑な質問に回答ありがとうございます。

document.writeをすると元々のHTMLの要素は消えてしまいますので、間違いなくエラー
>>この部分知らずにトレースしてデバッグしてました。

FirefoxのDOM-TOOLで見たときに、消えていましたので、回答のとおりだと理解できました。

アドバイスありがとうございます。トレースしようと表示させた部分の
document.writeを削除すると、動きが変な状態は解除されました。

おかげさまで思ったとおり動くようです。
感謝します。!

投稿日時 - 2010-08-13 18:11:25

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問