- ベストアンサー
document.getElementById( ).style.displayについて
dennou2000の回答
いろいろ調べてみましたが、結論として 「inherit」をＩＥ系(IE5.x、IE6)がサポートしていないのが原因の様です。 「displayプロパティの値を取得できませんでした。引数が不正です。」 のメッセージは、～～.style.displayのプロパティが参照できない事が原因ではなく、右辺値'inherit'が 受け付けられない事によって起こっています。 function toggle(Aid,Bid,Cid,Did,Eid) { document.getElementById(Aid).style.display = 'none'; document.getElementById(Bid).style.display = 'inherit'; ※ document.getElementById(Cid).style.display = 'inherit'; document.getElementById(Did).style.display = 'none'; document.getElementById(Eid).style.display = 'none'; } 現在は、※の箇所でエラーが発生します。 試みに、一行目の'none'を'xxxx'に変えると、そこでエラーが発生します。 これは、代入値が受付可能なものでないとエラーとなる事を示しています。 ちなみに以下のＭＳＤＮのライブラリでも、displayプロパティに対する設定値として'inherit'は 出てきません。 (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/css_ref_attributes_entry.asp） 一方で、FirefoxのCSS対応表 (http://f57.aaa.livedoor.jp/~motohiko/CSS/css2.1.html） 「'run-in', 'inline-block', 'inline-table' には非対応。」とありますが、'inherit'は対応している ようです。 代替手段はありそうですが、質問者の方が'inherit'をどのような意図で使っているかわかりかねるので その点はお答えかねます。
関連するQ&A
- style.displayだと効率悪いから...
style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
- style.displayだと効率悪いから…
style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。
- ベストアンサー
- JavaScript
- getElementByIdではまってます・・・
以下のソースを書いて、Firefoxで実行すると 検索ボタンをクリックするとテーブルが表示されるのですが すぐにもとに戻ってしまいます。 すいません。初心者です。 どなたかご教授ください。 言っている意味が分からなかったらすいません。 補足します。 HTMLです。 <td style="width:60px;" align="center"><input style="width:60px" type="submit" id="id" name="id" onclick="effectDetailWindow('detailWindow');" value="検索"></td> <div id="detailWindow" style="display:none;"> <table border="1" cellpadding="3" cellspacing="1" bordercolor="#000000" style="width:460px;"> <tr> <td style="width:80px;" class="table_head"> TEST1 </td> <td style="width:150px;"> <input type="text" size="25" maxlength="50" name="searchtest1" value="{$form.searchtest1}"> </td> <td style="width:80px;" class="table_head"> TEST2 </td> <td style="width:150px;"> <input type="text" size="25" maxlength="50" name="searchtest2" value="{$form.searchtest2}"> </td> </tr> </table> </div> JavaScriptです。 function effectDetailWindow(id) { var obj = document.getElementById(id); if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; } }
- 締切済み
- JavaScript
- dreamweaverｃｓ6のショートカット等
例えば document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; ↓ document.getElementById('tab10').style.display = 'none'; という記述があったとします。 この場合、tab5～tab10までいちいちコピーペーストでやるのが大変面倒です。 何か良いショートカット、機能はないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- document.getElementByIdがIE8だけ動きません
javascript 初心者です。 HP上で問い合わせページを作っています。 質問の内容によって入力項目を表示/非表示させるために以下のようなスクリプトを書きました。 q-1 を選んだ時は”名前”と”質問内容”を入力，q-2 を選んだ時は”名前”，”入力１”，”質問内容”を入力するという形式です。 質問内容の選択はプルダウンメニューから行います。 IE8以外では動くのですが、IE8だけ動きません。 どうすればよいかを教えて下さい。 <head> 略 <script type="text/javascript"><!-- function checkmenu( disp ) { var a = disp ; document.getElementById('basic-info').style.display = "block"; document.getElementById('question').style.display = "block"; switch(a){ case "select_q-1" : document.getElementById('disp_q-2').style.display = "none"; break; case "select_q-2" : document.getElementById('disp_q-2').style.display = "block"; break; } } --> </script> </head> <body> <略> <select name="naiyou"> <option onclick="checkmenu('select_q-1')" value ="q-1">質問１<br> <option onclick="checkradio('select_q-2')" value ="q-2">質問２<br> <div id="basic-info" style="display:none"> <table class="aaa"> <tr> <td class="aaa" width="30%" valign="top"><b>お名前:</b></td> <td class="bbb" width="70%"><input type="text" name="name" size=30 maxlength=50 value=""></td> </tr> </table> </div> <div id="disp_q-2" style="display:none"> <table class="aaa" > <tr> <td class="bbb" width="30%" valign="top"><b>入力１：</b></td> <td class="td_toumei" width="70%"><input type="text" name="nyuuryoku1" size=30 maxlength=50 value=""></td> </tr> </table> </div> <div id="question" style="display:none"> <table class="aaa"> <tr> <td class="aaa" colspan="2"><b>質問内容: </b></td> </tr> <tr> <td class="bbb" valign="top" colspan="2"> <textarea name="question" cols="60"rows="10"></textarea> </td> </tr> <tr> <td class="bbb" colspan="2"> <input type="hidden" name="language" value="j"> <input type="submit" value="送信"> <input type="button" name="del" value="本文 クリア" onclick="msgclear()"> </td> </tr> </table> </div> 略 </body> 実際の質問の項目や入力内容はもう少し複雑ですが、おおまかにはこんな感じです。 プルダウンメニューで選択しても、IE8だけまったく動きません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- style="displey:none"ができない
まず、このソースを見てください。 <html><head><base target="migi"></head> <body style="margin-top:3px;margin-left:3px;margin-right:3px;"> <div onmousedown="fmenu1()" style="cursor:hand;">メニュー表示</div> <table id=menu1 style="displey:none" border=0> <tr><td>あいうえお <br>かきくけこ <br>さしすせそ </td></tr></table> <SCRIPT language="JavaScript"> function fmenu1(){ if( menu1.style.display == "none") menu1.style.display = "block"; else menu1.style.display = "none"; } </SCRIPT> </body></html> これを表示すると、最初から「あいうえお」「かきくけこ」「さしすせそ」が出ている状態になります。 style="displey:none" というのは間違っているでしょうか？ 回答お願いします。
- ベストアンサー
- HTML
- 折り畳みメニューを使った場合の画像の空きについて
使用ソフトはドリームウィーバーです。 折り畳みメニューを使いたく、以下のとおり書いたのですが、 なぜか、サブメニューの画像が開いたときに微妙に空きがでます。 マージン0にしてあるのですが、どうしても画像と画像の間があいてしまいます。 どうやったら詰められるのでしょうか？ 教えていただけますか？ <script language="JavaScript"> <!-- function msl(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='block' else if(document.all)document.all(idmn).style.display='block' } function kks(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='none' else if(document.all)document.all(idmn).style.display='none' } //--> </script> <style type="text/css"> <!-- .menu{ width : 110px; cursor : pointer; } .sub{ display : none; margin: 0px; padding: 0px; } ul{ margin:0px; padding: 0px; } ul li{ margin:0px; list-style-type: none; padding: 0px; height: 22px; width: 110px; } ul li img{ margin:0px; padding: 0px; } --> </style> </head> <body> <noscript>※JavaScriptを有効にしてご覧下さい。</noscript> <div class="menu" onclick="javascript:msl('sub_a')" ondblclick="javascript:kks('sub_a')"><img src="シモン/html/images/menu01.gif" /></div> <ul class="sub" id="sub_a"> <li><img src="シモン/html/images/menu01_01.gif" /></li> <li><img src="シモン/html/images/menu01_02.gif" /></li> <li><img src="シモン/html/images/menu01_03.gif" /></li> <li><img src="シモン/html/images/menu01_04.gif" /></li> <li><img src="シモン/html/images/menu01_05.gif" /></li> </ul>
- ベストアンサー
- JavaScript
- スタイルシートの横並びリスト中央配置について
#Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。
- ベストアンサー
- CSS
- cssでdisplay:noneを指定した時のプルダウンメニュー
こんにちは、JavaScriptでプルダウンメニューを作ろうとして cssで予めdisplay:none;を指定したところ、 メニューがクリックしても開かなくなってしまいました。 html、css、JavaScriptの記述は以下の通りです。 html --------------------------------------- <span onclick="PullDown('term1')">クリック</span> <div id="term1"> <ul> <li>***********</li> <li>***********</li> </ul> </div> ----------------------------- css ------------------------------ div#term1 { display: none; } ------------------------------- JavaScript ------------------------------- function PullDown(id){ if(document.getElementById(id).style.display == 'none') document.getElementById(id).style.display=''; else document.getElementById(id).style.display='none'; } --------------------------------- cssの記述部分を無くすとちゃんと開いたり閉じたりと動作します。 また、 function Init(){ document.getElementById("term1").style.display="none"; } とJavaScriptで書いて、 bodyタグの所で <body onload="Init()">として呼び出してロード時に隠すようにするとちゃんと開閉してくれます。 cssでdisplay:none;と書くと動かなくなる理由と、 対策が分かる方居ましたら教えてください。
- ベストアンサー
- JavaScript
- ラジオボタンとフォーム検索の結び付け
スマホ用にゲームの攻略サイトを作りたいと思っています。 ■やりたいこと■ 値段はわかっているが名前がわからないアイテムの判別。 まずラジオボタンで「武器」か「防具」を選びます。 そして値段を入れると 「武器・600」＝勇者の剣 「防具・600」＝盾 といったように選んだラジオボタンによって同じ数字でも 表示結果を変えたいと考えています。 ラジオボタン「武器」を選ぶと検索用ボタン「button_1」が表示される。 ラジオボタン「防具」を選ぶと検索用ボタン「button_2」が表示される。 button_1と2の切り分けによってfunctionの切り分けを行っている状態です。 ■問題点■ 「防具」を押す→600を入力→「盾」が表示される→「武器」を押す→「勇者の剣」が表示されてしまう。 チェックボックスの選択を変えても表示結果は再度検索するまでそのまま、 もしくはチェックボックスを選び直した際は前回入力した数値は消えるなど対策を取りたいです。 そもそも他にもっといいやり方があるなど改善案をご教授いただきたいです。 よろしくお願いします。 【HTML】 <body> <div class="top_form"> <form name="test"> <label><input type="radio" name="radio_btn" value="buki" onclick="func();" checked="checked" />武器</label> <label><input type="radio" name="radio_btn" value="bougu" onclick="func();" />防具</label><br> <input id="test_form" type="tel" name="num"> <input id="button_1" type="button" value="button_1" onClick="func()"> <input id="button_2" type="button" value="button_2" onClick="func2()"> </form> </div> <div id="result"></div> </body> 【CSS】 <style> .top_form { width:300px; margin:0 auto; margin-top:30px; } #test_form { width:250px; height:30px; font-size:14px; margin-top:14px; } #button_1 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; } #button_2 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; background-color:#36C; } #result { border:solid 1px #666666; margin:0 auto; height:50px; width:200px; font-size:20px; line-height:50px; text-align:center; margin-top:30px; } </style> 【javascript】 <script> function func() { radio = document.getElementsByName('radio_btn'); if (radio[0].checked) { //button_1が出る document.getElementById('button_1').style.display = ""; document.getElementById('button_2').style.display = "none"; } else if (radio[1].checked) { //button_2が出る document.getElementById('button_1').style.display = "none"; document.getElementById('button_2').style.display = ""; } var url = ""; if (document.test.num.value == "600") { url = "勇者の剣"; } document.getElementById('result').innerHTML = url; } window.onload = func; function func2() { radio = document.getElementsByName('radio_btn'); var url = ""; if (document.test.num.value == "600") { url = "盾"; } document.getElementById('result').innerHTML = url; } </script>
- ベストアンサー
- JavaScript
お礼
inheritがIEのサポート外だったのですね。 ありがとうございます。 特にinheritを使わなければいけないわけじゃなかったので blockに変更して、無事正常な動きをするようになりました。 ご丁寧な回答をいただきましてどうもありがとうございました。