javascriptでgetElementById()の()の中の記述方法について
- javascriptでdocument.getElementById('header1').style.color = "red"; のような記述をしていましたが、document.getElementById("header1").style.color = "red"; でも同じ動作ができることが分かりました。
- (1)と(2)getElementByIdの()の中の記述は、どちらで記述するのが正しいのでしょうか。
- 通常、javascriptでgetElementById()の()の中の要素のIDはシングルクォーテーション(')で囲まれますが、ダブルクォーテーション(")でも正しく動作します。どちらを使用しても問題ありません。
- ベストアンサー
' と " について
javascriptで (1)document.getElementById('header1').style.color = "red"; と何気なく記述していましたが、 (2)document.getElementById("header1").style.color = "red"; でも問題なく動作することが分かりました。 (1)と(2)getElementByIdの()の中の記述は、どちらで記述するのが正しいのでしょうか。 onclick="alert('ボタンがクリックされました')" のように、"のなかに文字列を記述するときに'を使用する という意識ぐらいしかありませんでした。 ご教授お願いします。
- kureakai
- お礼率69% (179/256)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どっちもいっしょ
関連するQ&A
- HTMLからXHTMLへ変更する際のhtmlファイルの内容の変更について
HTML4.01では<div style="color:#ffffff">と</div>の間の文字色をjavascriptの中の関数で変える時、 <script type="text/javascript"> function func() { document.getElementById("xx")="#ff0000"; } </script> と記述しますが、XHTMLではstyle属性が非推奨となっています。 XHTMLでstyle属性を使わずにボタンを押すことで<div style="color:#ffffff">と</div>の間の文字色を変えるには javascriptの中の関数内でどのように記述すればよいのでしょうか。
- 締切済み
- HTML
- 【JavaScript】toggleの使い方
id="color"を付けた<p>タグで以下のような記述をしてみました。 マウスオーバーをすれば、上記の<p>タグの色は赤に変わり、マウスをはずすと 色が元の色（black）に戻ります。 うまくはいきましたが冗長に感じます。 classListを使ってtoggleをつけた練習をしたことはあります。 このようなケースで"toggle"を使ってマウスオーバーをした時にはテキストは赤色、はずすと元の色(black)になるように簡潔に記述する方法はあります？ 超初心者です。簡潔に記述する方法があれば教えて下さい。宜しくお願いします。 (HTML) <p>こんにちは。こんにちは。こんにちは。</p> <p id="color">こんにちは。こんにちは。こんにちは。</p> <p>こんにちは。こんにちは。こんにちは。</p> ---------------------------------------------------- (JavaScript) document.getElementById("color").addEventListener("mouseover", () => { document.getElementById("color").style.color = "red"; }); document.getElementById("color").addEventListener("mouseout", () => { document.getElementById("color").style.color = "black"; });
- ベストアンサー
- JavaScript
- 印刷プレビュー後のウィンドウクローズ
自解決できないので質問させていただきます 印刷ボタンとウインドクローズボタンがあるページがありまして 普通の状態ではまったく問題なしに動作するのですが下記の時に閉じるボタンが効かなくなります 動作○ ページ表示→ファイル→印刷プレビュー→プレビューボタンの「閉じる」→「印刷」又は「閉じる」 動作× ページ表示→ファイル→印刷プレビュー→プレビューボタンの右上の「×」→「印刷」は動作するが「閉じる」は反応しません 原因がよくわかりません。どなたかご教授お願いできませんか ---------------------------------------- <input type="button" name="close" value="閉じる" onclick="windowclose()"> <input type="button" name="go_print" value="印刷" onClick="sheetprint();"></td> <script language="JavaScript" type="text/JavaScript"> <!-- function sheetprint() { document.getElementById('go_print').style.visibility = 'hidden'; document.getElementById('close').style.visibility = 'hidden'; window.print(); document.getElementById('go_print').style.visibility = 'visible'; document.getElementById('close').style.visibility = 'visible'; } function windowclose() { window.close(); } //--> </script> ------------------------------------------- 印刷ボタンを押した時にボタンが消えるようにしています なおターゲットが変わってるのかと思い ウインドクローズでウインド名を指定してもうまくいきませんでした よろしくお願いします
- 締切済み
- JavaScript
- JavaScriptでa:activeなどの設定を取得する方法
JavaScriptでaの疑似クラスであるactiveやhoverの色設定を 取得する方法はないでしょうか？ IDでは下記のような感じで設定を読み書きできますが。 これらの疑似クラスはアクセスできないのでしょうか？ 調べてみましたが目的の情報にはたどり着けませんでした。 よろしくお願いいたします。 <span id="hoge" style="color:red">hoge</span> <script type="text/javascript"> <!-- var hogeColor= document.getElementById( "hoge" ).style.color; alert( hogeColor ); //--> </script>
- 締切済み
- JavaScript
- javascriptの記述方法
javascriptをhtml内に記述する時、 <script type="text/javascript> ～～処理～～ </script> だと思っています。 ただ、ボタンをクリックした時に、メッセージが表示される簡単なHTMLをonclickで作成する時 <input type="button" value="クリック動作確認" onclick="alert('ボタンがクリックされました')"> これだけで実行されます。(headタグにscript記述なしで動作確認。) なぜ、<script>記述がなくても動くのでしょうか？ onclick等のイベントハンドラに動作を記述する際は、そういう物だと覚えておいたほうがいいのでしょうか？ ※当然関数をonclickに使用する際は、onclick=関数(); と記述し、headのscriptタグに関数を記述すれば動くというのは分かっているのですが・・・。 なぜ、 onclick="alert('ボタンがクリックされました')" の場合は、noscript無しで、動作するのかが分かりません・・・。 ・onclick 属性 = javascript という判断をどこかでされているのでしょうか？ その結果、noscriptに記述がなくても動く？ ちょっと気持ち悪いので質問させて頂きました。 ご教授お願いします。
- ベストアンサー
- JavaScript
- javascript外部ファイル化の複数指定の質問です。
javascript外部ファイル化の複数指定の質問です。 一つ目 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} 二つ目 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ window.onload = function() { document.getElementById("home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; document.getElementById("sub_home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("sub_home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; } この上記の２つのjavascriptを別々に外部ファイル化して、head内に読み込んでおります。 両方とも動作させたいのですが、下のwindow.onload のjavascriptしか動作しません。 両方、動作させるには、どのように記述すればよいのでしょうか？ どなたか教えていただけませんか？ よろしくお願い致しますm(＿ ＿)m
- 締切済み
- JavaScript
- 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
- javascriptでスタイルを動的に作成する方法
javascriptで動的に新たにクラスを作成してスタイルを設定する方法を教えてください。 たとえば、 <html> <head> <style> .hoge { color: red; } </style> </head> <body></body></html> の<style>～</style>をjavascriptで記述するにはどう書けばよいでしょうか？ もちろん、 document.write('<style> .hoge {color: red;}</style>'); では、<style>タグを埋め込むのと同じですので、純粋なjsのcodingをご教示ください。(prototype.jsなどのライブラリを使わない方法) よろしくお願いします。
- ベストアンサー
- JavaScript
- Javascriptを短くしたい
初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>
- ベストアンサー
- JavaScript
- style.color の謎
以下のスクリプトを書いたのですが、色の変更が最初の一度だけしかできません。 色を元に戻すために、どのような訂正をすれば良いのか教えて下さい。 <SCRIPT> function ChangeColor(sw) { if (sw = 1) { document.getElementById('inputBox').style.color = 'red'; } else if (sw = 0) { document.getElementById('inputBox').style.color = 'blue'; } } </SCRIPT> <FORM> <INPUT type="text" id="inputBox" > <INPUT type="button" value="Change my color " onClick="ChangeColor(1)"> <Button onClick="ChangeColor(0)" > Reset </Button> </FORM>
- ベストアンサー
- JavaScript
お礼
情報ありがとうございます。 すっきりしました。