• ベストアンサー

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"; よろしくお願いします。

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

  • ベストアンサー
  • kata_kori
  • ベストアンサー率34% (8/23)
回答No.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>

hana3090
質問者

お礼

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

その他の回答 (2)

  • kata_kori
  • ベストアンサー率34% (8/23)
回答No.2

block[1]は単なる変数なのでスタイルは指定できません。 block[1].style.visibility="hidden"; ↓↓↓ eval(block[1] + ".style.visibility='hidden'");

hana3090
質問者

補足

解答ありがとうございます、 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)
回答No.1

block[n] ='abc' + n; とありますので、block[n]は単なる文字列ですね。 document.all[block[1]].style.visibility="hidden"; とすればいいのではないでしょうか。試してませんので確実かどうかはわかりませんが。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Netscape4でスタイルシートを設定すると、スクリプトが動作しません。

    お世話になっています。 現在、スタイルシートのvisibility属性を利用してリンクをクリックすると、見えなかったテーブルを表示させる、というサンプルを作っています。 しかし、テーブル内にスタイルシートの設定を入れた途端、Netscape4のみ動作しなくなりました。（「#この部分が～」のところです） 原因が分かれば、教えていただきたいと思います。 ソースは次の通りです。 function hyoji(lay){ if(document.getElementById) { document.getElementById(lay).style.visibility = 'visible'; } else if(document.all) { document.all(lay).style.visibility = 'visible'; } else if(document.layers) { document.layers[lay].visibility = 'show'; } } <A HREF="javascript:hyoji('test0')">ZERO</a>　 <A HREF="javascript:hyoji('test1')">ONE</a> <A HREF="javascript:hyoji('test2')">TWO</a> <div id = "test0" style="position:absolute; top:100px; left:100px ;visibility:hidden"> <table border=3> <tr> <td bgcolor=teal>ZERO</td> </tr></table></div> <div id = "test1" style="position:absolute; top:200px; left:100px ;visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink> #この部分が問題？ <span style="line-height:120%">ONE</font></td> </tr></table></div> <div id = "test2" style="position:absolute; top:150px; left:100px; visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink>TWO</td></tr> </table> </div>

  • javascriptが効かない・・・

    上下のチェックボックス（全チェック）をした後にリンクAのチェックをはずすとリンクBがチェックされている状態になります。 そのときメニューがリンクBがリンクされている状態にしたいのですがうまくいきません。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift-jis" /> <script type="text/javascript"> function pulldown(flg){ if(flg==0){ addInfoLink.style.visibility="visible"; }else{ updateInfo.style.visibility="visible"; } } function check(){ var cnt = 0; addInfoLink.style.visibility="hidden"; updateInfo.style.visibility="hidden"; for(i=0; i<document.forms[0].check1.length; i++){ if(document.forms[0].check1[i].checked == true){ cnt++; if(document.forms[0].check1[i].value==0){ alert("●"); muneHikasei.style.visibility="hidden"; linkB.style.visibility="visible"; return; }else if(document.forms[0].check1[i].value==1){ alert("▲"); muneHikasei.style.visibility="hidden"; linkA.style.visibility="visible"; return; } } } if(cnt==0){ linkB.style.visibility="hidden"; linkA.style.visibility="hidden"; addInfoLink.style.visibility="hidden"; updateInfo.style.visibility="hidden"; muneHikasei.style.visibility="visible"; } } var allFlg=false; function allCheckAction(){ if(allFlg== false && document.forms[0].allCheck1.checked==true){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=true; } check(); allFlg=true; document.forms[0].allCheck2.checked=true; return; } if(allFlg== true && document.forms[0].allCheck1.checked==false){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=false; } check(); allFlg=false; document.forms[0].allCheck2.checked=false; return; } if(allFlg== false && document.forms[0].allCheck2.checked==true){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=true; } check(); allFlg=true; document.forms[0].allCheck1.checked=true; return; } if(allFlg== true && document.forms[0].allCheck2.checked==false){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=false; } check(); allFlg=false; document.forms[0].allCheck1.checked=false; return; } } </script> </head> <body> <div id="muneHikasei" style="position:absolute; visibility:visible; left:9; top:28;">リンク</div> <div id="linkB" style="position:absolute; visibility:hidden; left:9; top:28;"> <a href="javaScript:void(0)" onclick="pulldown(0)">リンク</a> <div id="addInfoLink" style="position:absolute; visibility:hidden; left:4px top:16px; width:80; height:1px; background-color:#FFFFFF; layer-background-color:#FFFFFF"> リンクA<br /> <a href="">リンクB</a> </div> </div> <div id="linkA" style="position:absolute; visibility:hidden; left:9; top:28;"> <a href="javascript:void(0)" onclick="pulldown(1)">リンク</a> <div id="updateInfo" style="position:absolute; visibility:hidden; left:4px top:16px; width:80; height:1px; background-color:#FFFFFF; layer-background-color:#FFFFFF"> <a href="">リンクA</a><br /> リンクB </div> </div> <br><br><br><br><br> <form name="" method="post"> <input type="checkbox" name="allCheck1" value="1" onclick="allCheckAction()"/> <br> <input type="checkbox" name="check1" value="1" onclick="check()"/>リンクA <br> <input type="checkbox" name="check1" value="0" onclick="check()" />リンクB <br> <input type="checkbox" name="allCheck2" value="1" onclick="allCheckAction()"/> </form> </body> </html>

  • ワイドのモニターだとズレます

    下記のような記述を用いてオンマウスでメニューが現われるようにしているのです。 仕事で使っている１５インチモニターでは正常に表示できるのですが、家にあるワイドモニターで見るとズレが生じてしまいます。 これを直すにはどうしたら良いのでしょうか？ <style type="text/css"> <!-- #menu1{ position:absolute; top:22px; left:0px; visibility:hidden; } #menu2{ position:absolute; top:22px; left:90px; visibility:hidden; } #menu3{ position:absolute; top:22px; left:180px; visibility:hidden; }} --> </style>

  • 画像の座標位置取得

    javascriptの勉強を始めたばかりで、どうしてもわからないことがあるので質問させてください。（まだ初めて一週間程度の初心者です…） マウスの座標を取得するのはなんとなくわかったのですが、画像の座標をどうやって取得すればいいのかがわかりません。（マウスはevent.offsetで取得してるのでそれに合わせたい） 例えば… function lyrGetTop(lyr){ return( parseInt( document.getElementById(lyr).style.pixelTop ) ); } で、画面全体の位置からの座標を取得するのはできたのですが、ブロック内（？）の位置から取得することができません…。 どのようにすればevent.offsetでのマウスの座標ようにブロックを基準とした座標を取得することができますか？ それから、シューティングゲームの自機が弾を連射するようなアルゴリズムがわかりません。 <html> <head> <title></title> <script language="JavaScript"><!-- y = 450; interval = 20; function moveBall(){ y = y - interval; document.getElementById("ball").style.pixelLeft = getlyrleft("ber") + 24; document.getElementById("ball").style.pixelTop = y; document.getElementById("ball").style.visibility = "visible"; if( (y < 10) ){ document.getElementById("ball").style.visibility = "hidden"; document.getElementById("ball").style.pixelTop = getlyrtop("ber"); return 0; } } function getlyrtop(lyr){ return(parseInt(document.getElementById(lyr).style.pixelTop)); } function getlyrleft(lyr){ return(parseInt(document.getElementById(lyr).style.pixelLeft)); } // --></script> </head> <body onclick="setInterval('moveBall()',1)"> <img src="bb01.gif" id="ball" style="position:absolute; visibility:hidden" left:0px;top:16px;"> <img src="bb03.gif" id="ber" style="position:absolute; left:445px; top:459px;"/> </body> </html> これだと、連射どころか、二回目のクリックに反応すらしないんです…。 どうかご教授お願いします。

  • popupウィンドウでborderがcollapseなテーブル利用の問題

    popupウィンドウにテーブルを使用していて、 border-collapse: collapse　のボーダーがある場合に、 初期表示時点で、そのボーダーのみが表示されてしまいます。 firefox,operaでは起きずIE6で起きます。 そこで非表示にするためのjavascript をonloadで動かしているのですが、 データ量の大きいページだと、表示された後に消えるのが 見えてしまい不細工です。 最初から枠が表示されないようなcssの指定方法はないでしょうか。 <html> <head> <script> <!-- function PopupOn(Msg){ if(document.all){ MyMsg = document.all(Msg).style; MyMsg.visibility = "visible"; } else if(document.layers){ MyMsg = document.layers[Msg]; MyMsg.visibility = "show"; } else if(document.getElementById){ MyMsg = document.getElementById(Msg).style; MyMsg.visibility = "visible"; } } function PopupOff(Msg){ if(document.all) document.all(Msg).style.visibility = "hidden"; else if(document.layers) document.layers[Msg].visibility = "hide"; else if(document.getElementById) document.getElementById(Msg).style.visibility = "hidden"; } //--> </script> <style> <!-- #poplink {position:absolute;left:0px; top:30px; z-index:9; visibility:hidden;} #poplink table {border-collapse: collapse; background-color: #ffffff;} #poplink td {border: 2px solid #00ffff; } //--> </style> </head> <body onload="PopupOff('poplink')" > <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> </body> </html>

    • ベストアンサー
    • HTML
  • マウスをクリックで画像・・・

    マウスをクリックすると画像が飛び散る素材(?)を頂いてきたのですが、 以下の通りにUPすると「エラー」が出てしまいます。 どこが悪いのか解らないので よろしくお願いします。 <SCRIPT language="JavaScript" src="ht://xxx/xx.js"></SCRIPT> <BODY onload="initMouseEvents()"> <DIV id="sparks"> <DIV id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/1.gif" width="15" height="16"></DIV> <DIV id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/2.gif" width="15" height="16"></DIV> <DIV id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/3.gif" width="15" height="16"></DIV> <DIV id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i4.gif" width="15" height="16"></DIV> <DIV id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i5.gif" width="15" height="16"></DIV> <DIV id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i6.gif" width="15" height="16"></DIV> <DIV id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/7.gif" width="15" height="16"></DIV> <DIV id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/8.gif" width="15" height="16"></DIV> <DIV id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/9.gif" width="15" height="16"></DIV> <DIV id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/10.gif" width="15" height="16"></DIV> </DIV>

  • このプログラムを改善してくれませんか？。

    今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>

  • ドロップダウンメニューを短縮したい

    今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>

  • 最速コードに挑戦！？

    BASICを思い出してPSETを書いてみました。 LINE文を作りたいのですが、最速になるアルゴリズムをご存知の方は いらっしゃいますか？ <html> <body> <input type="button" value="Test C.G." onClick=" for(i=0;i<3800;i+=.5){ pset(350-Math.cos(i*3.14519/90)*300,350-Math.sin(i*3.14519/85)*300,'#f00'); } "> <script> function pset(x,y,c){ var p = document.createElement('div'); with(p){ style.position='absolute'; style.top=x+'px'; style.left=y+'px'; style.color=c; appendChild(document.createTextNode('.')); } document.body.appendChild(p); } </script>

  • 初期画像にレイヤーが出てしまう

    ＨＰにレイヤー設定をしたところ、画像を開けるとすぐレイヤーが出てしまいます。しかし、その画像でマウスを重ねたり外したりすれば、問題なく作動します。その後、ＨＰを開けると、また最初だけレイヤーが表示されてしまいます。どのようにしたら、最初の画面で表示されないようになるでしょうか？よろしくお願い致します。 次のように設定しています。 <script language="JavaScript"> <!--//レイヤー表示 function Lay_View(name,sw) { if (document.all) { //IE用 document.all[name].style.visibility=sw; } else if (document.layers) { //NC用 document.layers[name].visibility=sw; } } //--> </script> <div id="ABC" style="position:absolute; width:350px; height:30px; z-index:1; left: 80px; top: 210px">あいうえお</div> <a href="index1.html"onMouseOver="Lay_View('ABC','visible');"onMouseOut="Lay_View('ABC','hidden');">AIUEO</a> これだけです。何か足りないでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する