• 締切済み

左右に並べたオブジェクトの表示非表示を行いたい

上下に並べたボタンとテキスト入力欄の表示非表示は、INPUTオブジェクトのプロパティー、「style="display:none(block)」をJavaScriptで操作することによって可能だと思うのですが、「style」プロパティーの設定を行うと、上下にボタン、テキスト入力欄が表示されてしまいます。オブジェクトを左右に表示して、表示非表示をきる替えることはできないでしょうか？よろしくお願いします。

みんなの回答

  • Kuppycat
  • ベストアンサー率50% (109/216)
回答No.2

display:none ではなく visibility: hidden にしてはいかがでしょう？ これなら領域は確保されたままなので、その部分が空白になりますがレイアウトは崩れません。

osiete2345
質問者

補足

回答ありがとうございます。質問の記述にもれていましたが、表示するオブジェクトは表示非表示と切り替えるとともに、ボタン→テキスト、プルダウン→ボタンと複雑に変わっています。というわけで、複数のタイプのオブジェクトを網羅的に並べておき、必要なものが表示されるようJavaScriptで制御しようと思っています。しかも、、横に２つ並べるだけでなく、４つ、５つと並べる場合もあります。なのでパターン化してDIVでくくっておくのも難しいのです。よろしくお願いします。

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 多分、JavaScriptの問題ではなく、レイアウト方法だと思います。 border0のテーブルを利用して、左右にボタンとテキストフィールドを 並べてはいかがでしょうか？ <table cellspacing="0" cellpadding="2" border="0"> <tr> <td><input type="text"></td> <td><input type="button"></td> </tr> </table> サイズ等は調節して下さい。

osiete2345
質問者

補足

回答ありがとうございます。補足ですが、INPUTオブジェクトにstyleプロパティーを設定しない場合は問題ないのですが、「style="display:none(block)」を付けると上下に表示されてしまいます。「display」の記述が問題だというのはわかっているのですが、何か対策は無いでしょうか、よろしくお願いします。

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

関連するQ&A

  • クリックで表示/非表示の切り替え

    私は今現在HPを作成しているのですが、その中の特定のページでテキストをクリックしたら表示/非表示の切り替えをしたいと考えてます。 表示/非表示自体は検索して出てきたオープンソースを拝借したら出来ました。 ソースは下記のように記述してます。 しかし、既存の状態だと『テキスト1』をクリックして表示させたらもう一度『テキスト1』をクリックしない限り非表示にはなりません。 『テキスト1』をクリックして表示している状態で『テキスト2』をクリックしたら自動的に『テキスト1』の表示されてる部分を非表示しにしたいのですが。 <head> <SCRIPT type="text/JavaScript"> <!-- function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。 if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する //指定されたIDのstyle.displayがnoneなら if( document.getElementById(targetID).style.display == "none") { //blockに変更する document.getElementById(targetID).style.display = "block"; } else { //noneでなければ、つまりblockなら //noneにする document.getElementById(targetID).style.display = "none"; } } } //--> </SCRIPT> </head> <body> <a href="#" onClick="showHide('SH-001');return false;">テキスト1</a> <a href="#" onClick="showHide('SH-002');return false;">テキスト2</a> <div id="SH-001" style="display: none">テキスト1をクリックしたら表示される部分</div> <div id="SH-002" style="display: none">テキスト2をクリックしたら表示される部分</div> </body> Javascriptについてはまだ知識がなく解決方法が皆目見当もつきません。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

  • FireFoxでのブロック表示・非表示制御

    DIVタグで囲んだ各ブロックの表示・非表示をJavascriptで動的に制御したく、下記のソースの通りJavascriptで表示の切り替え処理を記述したところ、IE6.0では動作しましたが、FireFox2.0では切り替えリンクをクリックしても無反応の状態となってしまいました。 FireFoxのJavascript互換について経験不足のため原因がつかめず困っております。 FireFoxでも動作可能となるには、どのような記述をすればよろしいでしょうか。もしご存知の方がおられましたら宜しくお願い致します。 *** Javascriptソース ****************** function showArea(areaId){ A.style.display="none"; B.style.display="none"; C.style.display="none"; areaId.style.display="block"; } *** ブロック切り替え用リンク ****************** <a href="javascript:showArea(A)">Ａブロック</a> <a href="javascript:showArea(B)">Ｂブロック</a> <a href="javascript:showArea(C)">Ｃブロック</a> *** 表示用ブロック ****************** <div id="A"> Ａブロックの記述内容 </div> <div id="B"> Ｂブロックの記述内容 </div> <div id="C"> Ｃブロックの記述内容 </div>

  • レイヤーの非表示

    よろしくお願いします。 本文中に <div id="test" style="DISPLAY:none;POSITION:absolute;"> </div> としてあり、何らかのイベントを受けたらjavascript内で、 objTest=document.getElementById('test'); objTest.style.display='block'; と表示したレイヤーを今度は非表示にする場合、 表示したレイヤー、例えばHTMLテーブルを表示した場合そのテーブル以外の場所をクリックしたというイベントを拾うことは可能でしょうか？ フォームにテキストが入力された時、テーブルが表示されその中にあるテキスト（リンク）をクリックした場合、入力補完される。リンク以外をクリックした場合（入力補完をせず、他の動作に移ったとき）テーブルが消えるイメージです。 どうぞよろしくお願いいたします。

  • 「ポタン」で表示・非表示 (つづき)(^^;

    「ポタン」で表示・非表示 ブロック<Div></Div>の「表示・非表示」を「ポタン」でやりたいのですが。。の件で、下記の回答をいただき、できたのですが、 最初に「★非表示」の状態にしたい場合は、どうしたらいいのでしょうか?　よろしく願いいたします。 <html> <body> <div id="a">abcdefg</div> <input type="button" value="on/off" onClick="disp('a')"> <hr> <div id="b">abcdefg</div> <input type="button" value="on/off" onClick="disp('b')"> <hr> <script> function disp(id){ // alert(document.getElementById(id).style.display=='none'?'block':'none'); document.getElementById(id).style.display = document.getElementById(id).style.display=='none'?'block':'none'; } </script>

  • JavaScriptでテキストを表示・非表示・・・

    こんばんは。お世話になります。 JavaScriptでテキストがボタンを押すと表示/非表示と切り替わるようにしたいです。 サイトを参考に試してみましたが一か所しか表示/非表示となりませんでした。 1行おきに表示/非表示としたいのでブロック単位では指定出来ません。 display構文を使って作りました。 div idがそれぞれの部分に必要かと思い、div id="○○a"、div id="○○b"という風に付けましたがうまくいきませんでした。 　　　↓このような形にしたいです 　あいうえおかきくけこ　 　サシスセソタチツテト　←この行を表示/非表示 　なにぬねのはひふへほ　 　マミムメモヤユヨ　←この行を表示/非表示 こういう風なように打ちました。 あいうえおかきくけこ<br> <div id="disp">サシスセソタチツテト</div><br> 　　　　　　　 なにぬねのはひふへほ<br>　 <div id="disp">マミムメモヤユヨ</div><br> <form> <input type="button" value="表示" onclick="Hyoji1(0)"> <input type="button" value="非表示" onclick="Hyoji1(1)"> </form> <script type="text/javascript"> <!-- function Hyoji1(num) { if (num == 0) { document.getElementById("disp").style.display="block"; } else { document.getElementById("disp").style.display="none"; } } // --> </script> どの辺りを間違っているでしょうか?宜しくお願い致します。

  • 表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか？

    複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。 なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。 最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか？ ●例えば、test1を押した際、test2と3は非表示としたいです。 <script language="JavaScript" type="text/JavaScript"> <!-- function ChDsp2(strShow,strHidden){ var obj=''; obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow); obj.style.display = "block"; obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden); obj.style.display = "none"; } //--> </script> <a href="javascript:ChDsp2('text1','text2');">1を表示</a> <a href="javascript:ChDsp2('text2','text1');">2を表示</a> <a href="javascript:ChDsp2('text3','text1');">3を表示</a> <span id="text1" style="display:block;">111111</span> <span id="text2" style="display:none;">222222</span> <span id="text3" style="display:none;">333333</span> どなたか教えてください。お願いします。

  • 文字列の表示/非表示

    下記のコードで、ボタンを押すたびに、 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>

  • 表示・非表示の度にURLにパラメーター表示

    初心者なので間違っていることもあるかもしれませんが、よろしくお願いします。 サーバーサイドの言語ではないので無理だろうなとは思っていますが、念の為に詳しい方にお聞きしたいことがあります。 現在サイトを開設していてリンクをクリックしたらその下にサンプルテキストが表示・非表示で切り替わるようにしています。 1ページにこのような表示・非表示のリンクを多数設置しているのですが、クリックして表示させても当然URLはそのままです。 これをクリックした場合、例えば下記のようにすることはできるでしょうか？ http://○○.com/sample.html ↓ http://○○.com/sample.html?test このようにパラメーター？がついたURLにして表示させたりしたいのですが。そのURLにアクセスすれば、現在表示させているのがすぐ見れるように。 よくPHPやCGIでみられるやつです。 ソースは下記のようにしています。 □HTMLファイル <a href="#" class="player" onClick="showHide('TEST');return false;">テスト</a> <div id="TEST" style="display: none">サンプルテキスト</div> □外部JSファイル var objTextIDArray = new Array("TEST"); function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。 if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する //指定されたIDのstyle.displayがnoneなら if( document.getElementById(targetID).style.display == "none") { //blockに変更する for(var i = 0; i < objTextIDArray.length; i++) if(document.getElementById(objTextIDArray[i])) document.getElementById(objTextIDArray[i]).style.display = "none"; document.getElementById(targetID).style.display = ""; } else { //noneでなければ、つまりblockなら //noneにする document.getElementById(targetID).style.display = "none"; Javascriptに詳しい方に無理と言われれば諦めつくのですが。もしかしたら何か方法があるかもと思いました。 ご存知の方いらっしゃいましたら、ご教示ください。 よろしくお願いします。

  • JavaScriptを使ってボタンを消したい

    <input type="button" value="ボタン" name="aaa" onClick="this.style.display='none'"> で、消すことができますが、 これをJavaScriptを使って、 別のところからボタンを消すためにはどうやったらいいのでしょうか？ ＃例えばどこかをクリックしたときにボタンを表示したり消したりするなど。

  • ページ遷移後のcssプロパティ保持

    チェックボックスがチェックされているか否かで ディスプレイプロパティの表示/非表示を切り替えるスクリプトを作成しました。 しかしながら、submitでページ遷移した後、ブラウザの戻るボタンで戻ると 非表示の状態になってしまいます。 ページ遷移後もディスプレイプロパティを保持する良い方法はありますでしょうか。 ●javascript <script type="text/javascript"><!-- function chkdisp( obj) { if( obj.checked ){ document.getElementById('ans1').style.display = "block"; } else { document.getElementById('ans1').style.display = "none"; } } // --></script> ●html <form method="post" action="temp2.html" enctype="multipart/form-data"> <input type="checkbox" id="chk1" onclick="chkdisp(this)" /><label for="chk1">これクリックで「クリック１」</label><br /> <p id="ans1" style="display:none;">クリック１</p> <input type="submit"> </form>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する