プロが教えるわが家の防犯対策術!

下記は画面にJavaScriptで碁盤の目に区切り
左上の一区切りの下地を表示するコードです
<html>
<head>
<title>タイル</title>
<script language="JavaScript">
<!--
var block = [0];
function setTile() {
num = 100;
w = Math.floor(document.body.clientWidth / num);
h = Math.floor(document.body.clientHeight/ num);
wTag = "";
n = 1;
for (j=0; j<=h; j++) {
for (i=0; i<=w; i++) {
wTag += "<span id='abc" + n +"' style='position:absolute;top:" + j*num + "px;left:" + i*num + "px;width:" + (num-1) + "px;height:" + (num-1) + "px;background-color:blue;'>" + "</span>";
block[n] ='abc' + n;
n++;
}
}
document.all["tile"].innerHTML = wTag;
document.body.style.visibility = "visible";
abc1.style.visibility="hidden";
}
// -->
</script>
</head>
<body onLoad="setTile()" style="visibility:hidden">
<div id="tile" style="position:absolute;top:0px;left:0px;"></div>
</body>
</html>
下地を表示する
abc1.style.visibility="hidden";
を下記に直すと動かなくなります
block[1].style.visibility="hidden";
よろしくお願いします。

A 回答 (3件)

#2です。

やりたい事がちょっと分からないんですが、
↓こんな感じでしょうか?(順番にhidden化していく)

<html>
<head>
<title>タイル</title>
<script language="JavaScript">
<!--
var block = new Array();
var n = 0;
var a = 1;
function setTile() {
num = 100;
w = Math.floor(document.body.clientWidth / num);
h = Math.floor(document.body.clientHeight/ num);
wTag = "";
n = 1;
for (j=0; j<=h; j++) {
for (i=0; i<=w; i++) {
wTag += "<span id='abc" + n +"' style='position:absolute;top:" + j*num + "px;left:" + i*num + "px;width:" + (num-1) + "px;height:" + (num-1) + "px;background-color:blue;'>" + "</span>";
block[n] ='abc' + n;
n++;
}
}
document.all["tile"].innerHTML = wTag;
document.body.style.visibility = "visible";
setBlock();
}
function setBlock() {
if (a <= 20) {
eval(block[a] + ".style.visibility='hidden'");
a++;
setTimeout("setBlock()", 1000);
}
}
// -->
</script>
</head>
<body onLoad="setTile();" style="visibility:hidden">
<div id="tile" style="position:absolute;top:0px;left:0px;"></div>
</body>
</html>
    • good
    • 0
この回答へのお礼

再度の回答有難う御座います、私の考えているとおり出来ました。
どこが間違っていたのか考えてみます、これからもよろしくお願いします。

お礼日時:2004/03/08 11:30

block[1]は単なる変数なのでスタイルは指定できません。



block[1].style.visibility="hidden";
↓↓↓
eval(block[1] + ".style.visibility='hidden'");

この回答への補足

解答ありがとうございます、
setBlock(a);
の所を1秒ごとに下地が表示されるように
setTimeout("setBlock(a)", 1000);
に変更すると実行できません、よろしくお願いします。

<html>
<head>
<title>タイル</title>
<script language="JavaScript">
<!--
var block = [0];
var n = 0;
function setTile() {
num = 100;
w = Math.floor(document.body.clientWidth / num);
h = Math.floor(document.body.clientHeight/ num);
wTag = "";
n = 1;
for (j=0; j<=h; j++) {
for (i=0; i<=w; i++) {
wTag += "<span id='abc" + n +"' style='position:absolute;top:" + j*num + "px;left:" + i*num + "px;width:" + (num-1) + "px;height:" + (num-1) + "px;background-color:blue;'>" + "</span>";
block[n] ='abc' + n;
n++;
}
}
document.all["tile"].innerHTML = wTag;
document.body.style.visibility = "visible";
a = 1;
setBlock(a);
}
function setBlock(a) {
eval(block[a] + ".style.visibility='hidden'");
//document.all[block[a]].style.visibility="hidden";
if (a <= 20) {
a++;
setBlock(a); }
//setTimeout("setBlock(a)", 1000); }
}
// -->
</script>
</head>
<body onLoad="setTile()" style="visibility:hidden">
<div id="tile" style="position:absolute;top:0px;left:0px;"></div>
</body>
</html>

補足日時:2004/03/08 09:00
    • good
    • 0

block[n] ='abc' + n;


とありますので、block[n]は単なる文字列ですね。

document.all[block[1]].style.visibility="hidden";

とすればいいのではないでしょうか。試してませんので確実かどうかはわかりませんが。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!