- ベストアンサー
style.visibility="hidden";
下記は画面に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"; よろしくお願いします。
- hana3090
- お礼率29% (65/222)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＃２です。やりたい事がちょっと分からないんですが、 ↓こんな感じでしょうか？（順番に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>
その他の回答 (2)
- kata_kori
- ベストアンサー率34% (8/23)
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>
- nuruhho44
- ベストアンサー率57% (38/66)
block[n] ='abc' + n; とありますので、block[n]は単なる文字列ですね。 document.all[block[1]].style.visibility="hidden"; とすればいいのではないでしょうか。試してませんので確実かどうかはわかりませんが。
お礼
再度の回答有難う御座います、私の考えているとおり出来ました。 どこが間違っていたのか考えてみます、これからもよろしくお願いします。