ページ表示時に要素を非表示する方法
- ページが表示された時に、指定した要素を非表示にする方法について教えてください。
- 現在、bodyのonLoad時に、Prototype.jsのElement.hideを使用して要素を非表示にしようとしていますが、一度要素が表示されてしまいます。
- 要素が非表示のまま表示される方法について教えてください。
- ベストアンサー
以下の事をやろうとしています。
以下の事をやろうとしています。 ページが表示された時に、<div id="windowX">から</div>までを 非表示にしたいです。 現在、bodyのonLoad時に、 Prototype.jsのElement.hideをコールする関数を使って window1～9までを非表示にしようとしていました。 ソースは以下のようなものです。 <script type="text/javascript"> function initSetting() { for(i=0;i<max;i++) { Element.hide($('window'+String(i+1))); } return; } 略 <body onLoad="initSetting()"> <div id="window1">ウィンドウ1</div> <div id="window2">ウィンドウ2</div> <div id="window3">ウィンドウ3</div> <div id="window4">ウィンドウ4</div> ページ表示後、idがwindow1～9ものを非表示にできたのですが、 一度「ウィンドウ1」～「ウィンドウ9」という文字が表示されてしまい、 すぐに（1秒くらい）非表示になってしまいます。 「ウィンドウ1」～「ウィンドウ9」という文字が表示されず、 hide状態にしたいのですが、何かいい方法はないでしょうか？ よろしくお願いします。
- nagaaaa
- お礼率80% (4/5)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
CSSで最初から非表示というのはなしなのですよね？ HTML内で直接実行させるほうが、onloadで実行させるより早く実行できます。 ただし、対象divの記述よりも後でないと効果はありません。 （prototypeは使用していません。もしも、非表示のためだけに使用しているのなら不要でしょう。） 以下、サンプルです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <div id="window1">ウィンドウ1</div> <div id="window2">ウィンドウ2</div> <div id="window3">ウィンドウ3</div> <div id="window4">ウィンドウ4</div> <script type="text/javascript"> <!-- (function() { var i, e, max = 9, na = "window"; for (i=1; i<=max; i++) if (e = document.getElementById(na + i)) e.style.display ="none"; })(); //--> </script> </body> </html>
関連するQ&A
- innerHTMLを使用するとうまく表示できない文字があるのですが・・・。
以下のスクリプトを実行すると、 特殊文字は1つしか表示されません。 \"\"や&&の他に、1つしか表示されない特殊文字は あるのでしょうか？ <SCRIPT language=\"VBScript\"> Sub window_onLoad() layer1.innerHTML = \"\"\"\" layer2.innerHTML = \"&&\" layer3.innerHTML = \"XX\" End Sub </SCRIPT> <body> <font face=\"MSゴシック\" size=\"7\"> <div id=\"layer1\" align=\"center\"><span></span></div> <div id=\"layer2\" align=\"center\"><span></span></div> <div id=\"layer3\" align=\"center\"><span></span></div> </font> </body>
- ベストアンサー
- HTML
- ブラウザに文字が表示されません。
はじめまして。 質問があります。 以下のコードを見てください。 ---------------------------------------------------------------- <html> <head> <script type="text/javascript"> <!-- function rand() { window.document.getElementById("i").innerHTML = Math.random(); } //--> </script> </head> <!-- <body onLoad="rand()"> --> <body> <form name="myform"> <input type="submit" name="submit" onClick="rand()"><br> </form> <div id="i"></div> </body> </html> ---------------------------------------------------------------- あらかじめonLoadイベントでrand()関数を呼び出しておくと、後から 送信ボタンを押下すると、 ブラウザに乱数が表示されるのですが、onLoadイベントを使用せずに 送信ボタンを押下するとブラウザに 乱数が表示されません。これは一体なぜなのでしょうか？ 例えば、レイアウトが一度確定したら、そのレイアウトに後から 文字などを表示させることができないなどというような原因 なのでしょうか？よくわかりません。ご教授お願いします。
- ベストアンサー
- JavaScript
- 引数を持つコールバック関数をonloadで複数実行
下記のような内容で、指定したidを持つ要素に新しい内容を追加したいのですが、この内容だとcontent2のidを持つdiv要素にしか内容が追加されません。 そこで、対象となるidを持つ要素をいくつ追加しても反映されるようにしたいのですが、これを実現するにはどうしたら良いでしょうか？ アドバイス等、何かしらお力添えを頂ければ幸いです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Title</title> <script type="text/javascript"> // </body>直前には置きたくない // 指定したidを持つ要素に新たな内容を追加する関数 function ins( id ) { var output = document.createElement( 'span' ); output.innerHTML = '<p>content</p>'; // 追加する内容はhtmlやjavascriptなど必要に応じて変化する var element = document.getElementById( id ); element.appendChild( output ); } window.onload = function() { ins( 'content1' ); } window.onload = function() { ins( 'content2' ); } </script> </head> <body> <div id="content1"></div> <!-- window.onloadではins( 'content2' );に上書きされてしまう --> <div id="content2"></div> <!-- <div id="content3"></div> <div id="content4"></div> ... いくつ追加しても対応出来るようにしたい --> </body> </html>
- ベストアンサー
- JavaScript
- イベントに適切な値が伝わらない
0から9までidをもつdivを用意して、それぞれクリックしたら そのidを表示したいのですが、なぜかどれをクリックしても 表示されるのは「10」でした。以下のやり方では何がいけないのでしょうか？ function sample(){ for(i=0; i<10; i++){ var obj = document.getElementById(i); obj.onclick = function(){ sample_alert(i); }; } } function sample_alert(i){ alert("i="+i); } window.onload = function() { sample(); } for($i=0; $i<10; $i++){ print "<div id=\"{$i}\">{$i}</div><br>\n"; }
- ベストアンサー
- JavaScript
- 1ページ内で複数のwindow.onload = functionの動作
Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>
- ベストアンサー
- JavaScript
- なぜfunc()で動き、funcで動かないのか。
以前良く似た質問をしましたが、また疑問点が出たので質問します。 前回は、以下のコードでなぜonload = funcで動作し、onload = func()では動作しないのかをお聞きしました。 var img = new Image(); window.onload = function() { img.onload = func; } function func() { （省略） } その結果、funcだと関数を指定し、func()だと関数の返り値を代入するという答えを頂きました。 しかし自分で実験してみたところ、以下のコードでは逆の結果になりました。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { document.getElementById("result1").innerHTML = "result1"; } function result2() { document.getElementById("result2").innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> onload = result2()の方は期待通りの結果が得られましたが、onload = result1ではdiv要素に文字列は挿入されませんでした。onloadによって実行される関数をfunc形式で指定したのになぜ動作せず、func()形式のもののみ動作したのでしょうか？ あと蛇足になりますが、このようなコードも試してみましたが、どちらもうまくいきませんでした。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { this.innerHTML = "result1"; } function result2() { this.innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> 両方のfunction内のthisはdocument.getElementById("result1")またはdocument.getElementById("result2")を指すのではないのでしょうか？
- ベストアンサー
- JavaScript
- セレクトメニューに応じたdivタグの内容
javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>
- ベストアンサー
- JavaScript
- 【CSS】ウインド幅を変えた際の表示
以下のようなHTMLを用意しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style> <!-- #aaa { float:left; z-index : 1; } #bbb { float:right; z-index : 2; background-color : #ffffff; } --> </style> </head> <body> <div id="aaa">aaaaaaaaaaaaaaaaaaaa</div> <div id="bbb">bbbbbbbbbbbbbbbbbbbb</div> </body> </html> （１）ウインド幅が充分に広い場合、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb│ （２）ウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb│ （３）さらにウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaa bbbbbbbbbbbbbb│ <-スクロールバー-> このhtmlを改造して以下の様な動作を実現したいです。 （N１）ウインド幅が充分に広い場合、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb│ （N２）ウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbb│ （N３）さらにウインド幅を狭くしていくと、以下の様に表示されます。 │bbbbbbbbbbbbbb｜ <-スクロールバー-> 以下の様に修正してみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style> <!-- #aaa { float:left; z-index : 1; } #bbb { float:right; z-index : 2; background-color : #ffffff; } --> </style> <script> window.onload = function(){ i = function(id){ return document.getElementById(id) }; i('aaa').style.width = i('aaa').innerHTML.length ; } </script> </head> <body> <div id="aaa">aaaaaaaaaaaaaaaaaaaa</div> <div id="bbb">bbbbbbbbbbbbbbbbbbbb</div> </body> </html> （N１）から（N２）までの動作はFF及びOperaでは実現できましたが、IEでは変わらずでした。 （N１）、（N２）、（N３）のように動作するにはどうしたらよいでしょうか？
- 締切済み
- HTML
- 文字列の表示/非表示
下記のコードで、ボタンを押すたびに、 sample1 sample2 sample3 の３個の文字列の非表示/表示が切り替わるようにしたいのですが、 alert(elements.length+"個の要素を取得しました"); の実行で、class="sample"のエレメントの個数は正しく取得できているようなのですが、 elements.style.display = elements.style.display == "none" ? "block" : "none"; で非表示/表示が切り替わってくれません。 何か書き方が悪いのでしょうか？ ご経験のある方、御教示ください。 <html> <head> <title>document.getElementsByClassName - class名を元にエレメントを取得する</title> </head> <!--class名を元にエレメントを取得するのサンプル--> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function execute() { var elements = document.getElementsByClassName("sample"); alert(elements.length+"個の要素を取得しました"); elements.style.display = elements.style.display == "none" ? "block" : "none"; } //--> </script> <body> <div id="sample1" class="sample" style="display:none;">sample1</div> <div id="sample2" class="sample" style="display:none;">sample2</div> <div id="sample3" class="sample" style="display:none;">sample3</div> <button onclick="execute()">サンプル実行</button> </body> </html>
- ベストアンサー
- JavaScript
- リアルタイムに時計を表示するときのsetIntervalについて
いつもお世話になっています。 いつも以上に稚拙な質問で申し訳ないのですが、ご助力願います。 <html> <head> <script type="text/javascript"> <!-- var today = new Date(); window.onload = function dispTime(){ document.getElementById("showTime").innerHTML = today.getFullYear() + "/" + (today.getMonth()+1) + "/" + today.getDate() + " " + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); setInterval('dispTime()',1000); } //--> </script> </head> <body> <div id="showTime"></div> </body> </html> できるだけ<body onload="">を使いたくないので、window.onloadにしてあります。 イメージとしては、document.getElementById("showTime").innerHTMLでshowTimeに時間が表示され、setIntervalで再度disptimeが呼ばれ、という無限ループになればよいと考えてこのソースになりました。 ただ現状は、ロード時に時刻が表示され、そのまま動きません。 たぶんsetIntervalの場所とか使い方がおかしいような気がするのですが、どうもよくわかりません。 参考にしたサイトによってsetInterval("dispTime()"...だったり setInterval("disptime"...だったりと記述がバラバラで、 ほとんどのところでは、body onload="setInterval("...とonload扱いでした。 body onloadは使わずに、1秒ごとに動く時刻表示をするには、どこを直せばよいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
おかげさまで、期待通りの動作となりました。 ありがとうございます！