下記は画面に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";
よろしくお願いします。
No.1
- 回答日時:
block[n] ='abc' + n;
とありますので、block[n]は単なる文字列ですね。
document.all[block[1]].style.visibility="hidden";
とすればいいのではないでしょうか。試してませんので確実かどうかはわかりませんが。
No.2
- 回答日時:
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>
No.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>
再度の回答有難う御座います、私の考えているとおり出来ました。
どこが間違っていたのか考えてみます、これからもよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
cssでdisplay:noneを指定した時...
-
バッチファイルでカウントアッ...
-
背景色を透明化
-
HTMLとJavaScriptで作ったタイ...
-
読み込んだQRコードをフォーム...
-
変数内容をHTML内で表示する方法
-
ネストされたハッシュの値から...
-
checkboxにチェックを入れると...
-
iframe内のリンクが飛ばないの...
-
classList で、class名が付かな...
-
html内でJavaScriptで参照先を...
-
HTMLタグに複数のクラスを設定...
-
ディレクトリ内画像表示
-
CSS のみのタブ切り替えについて
-
jQueryで同じクラス名のものを...
-
jQueryでのドラッグアンドドロ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
タブで開いてさらにタブ内をア...
-
IFRAMEの表示/非表示を切り替え...
-
変数名をどのようにつけるのが...
-
表示・非表示のスクリプトで、...
-
クリックで色変更後に既に変更...
-
jQueryでクリックされた要素のi...
-
HTMLとJavaScriptで作ったタイ...
-
console.log結果をhtmlで表示し...
-
HTMLタグに複数のクラスを設定...
-
指定したパスが現URLに含まれて...
-
iframe内のリンクが飛ばないの...
-
背景色を透明化
-
変数内容をHTML内で表示する方法
-
テキストエリア内の一部の文字...
-
classの中の<a>タグにidを追加
おすすめ情報