HTMLボタンのクラスを動的に変えることはできるか
- 質問は、HTMLボタンのクラスを動的に変えることはできるか、ということです。
- 今回は、ボタンの文字をJavaScriptで条件分岐することに成功しましたが、同様にボタンのクラスを変えることはできるか疑問です。
- CLASSはスタイルシートに定義されているため、インクルードファイルに記述されています。
- ベストアンサー
ＨＴＭＬボタンのクラスを動的に変えられるか
<INPUT TYPE="button" NAME="del" VALUE="削除" CLASS="button" onClick="del_mail()"> このように定義したボタンの文字をＪＳで if (aaa == bbb){ del.value = "ＡＡＡ"; } else{ del.value = "ＣＣＣ"; } という分岐の結果によって動的に変えることには成功しました。 質問は、同じようにこのボタン"del"のCLASSを動的に 変えることはできるか、ということです。 （補足ですが、CLASSはスタイルシートに定義されていま す。スタイルシートはインクルードファイルです。） よろしくお願いします。
- snowair
- お礼率74% (60/81)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
残念ながら無理です。 現行の最新バージョンであるJavaScript1.3までで定義されているボタンオブジェクトのプロパティは name(名前), value(値) (JavaScript1.0) type(タイプ) (JavaScript1.1) だけです。
関連するQ&A
- JavaScriptを使ってボタンを消したい
<input type="button" value="ボタン" name="aaa" onClick="this.style.display='none'"> で、消すことができますが、 これをJavaScriptを使って、 別のところからボタンを消すためにはどうやったらいいのでしょうか？ ＃例えばどこかをクリックしたときにボタンを表示したり消したりするなど。
- ベストアンサー
- JavaScript
- 複数ボタンのvalueを送れない
ひとつのフォームで複数のボタンを使う方法を探していたら 次のような方法があるとのことでした。 <form method="post" name="MyForm"> <INPUT TYPE="BUTTON" VALUE="aaa" onClick="MyForm.action='hoge.cgi';MyForm.submit();"> <INPUT TYPE="BUTTON" VALUE="bbb" onClick="MyForm.action='hoge.cgi';MyForm.submit();"> </form> これで、ボタンによってVALUEを渡せるのかと思いきや、 飛んでいきませんでした・・・ 複数ボタンを用意して、ボタンによってその VALUE値を渡す方法がありませんでしょうか？
- ベストアンサー
- CGI
- <input> のbuttonで関数を実行したい
<input> 要素のbuttonを押すと※の処理が実行されるようにするには、どの部分を直すべきかご指摘いただけませんか。 よろしくお願いします。 -aaa.html <html> <!DOCTYPE> <body> <input id="ccc" type="button" value="スタート"> <script src="bbb.js"></script> </body> </html> -bbb.js document.getElementById("ccc").onclick = function buttonClick(){※}
- ベストアンサー
- JavaScript
- HTML・CSS ボタンの表示
<div class="item"> <tr> <td><input type="button" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" value="お弁当" onclick="get_calc(this)"></td> </tr> </div> ボタンを画面の50％の幅に均一の大きさで表示したです． CSSわかる方，教えてください！お願いします！
- ベストアンサー
- CSS
- 複数のラジオボタン項目でのテキスト入力欄の有効化
調べながら手探りでソースを書いてみましたが、うまく動きません。 javascript初心者ですので、ものすごく初歩的な勘違いがあったり、または根本から全く間違っているかもしれません。 以下のソースのように、ラジオボタンで選択してもらう項目が３つある場合、それぞれ「なし」を選択した場合だけテキスト入力欄を非表示にしたいのですがうまく動きません。 ラジオボタンで選択する項目が１つずつだとうまくいくのですが、３つの場合どこを修正したらいいのでしょうか？ よろしくお願いします。 【HTML】 <script type="text/javascript" src="sample.js" charset="UTF-8"></script> <ul> <li><input type="radio" name="AAA" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="AAA" id="by_week" value="１週間ごと" onClick="changeDisplay()"/>１週間ごと</li> <li><input type="radio" name="AAA" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="AAA" id="by_year" value="１年ごと" onClick="changeDisplay()"/>１年ごと</li> </ul> <p id="AAA-text" style="display:none;"> <input type="text" name="XXX" size="15" > </p> <ul> <li><input type="radio" name="BBB" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="BBB" id="by_week" value="１週間ごと" onClick="changeDisplay()"/>１週間ごと</li> <li><input type="radio" name="BBB" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="BBB" id="by_year" value="１年ごと" onClick="changeDisplay()"/>１年ごと</li> </ul> <p id="BBB-text" style="display:none;"> <input type="text" name="YYY" size="15" > </p> <ul> <li><input type="radio" name="CCC" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="CCC" id="by_week" value="１週間ごと" onClick="changeDisplay()"/>１週間ごと</li> <li><input type="radio" name="CCC" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="CCC" id="by_year" value="１年ごと" onClick="changeDisplay()"/>１年ごと</li> </ul> <p id="CCC-text" style="display:none;"> <input type="text" name="ZZZ" size="15" > </p> 【sample.js】 function changeDisplay() { if ( document.mailform["AAA"][0].checked ) { document . mailform["XXX"] . disabled = true; document . getElementById('AAA-text') . style . display = "none"; } else { document . mailform["XXX"] . disabled = false; document . getElementById('AAA-text') . style . display = "inline"; } } window.onload = changeDisplay; //---------------------------------------------------------------------------- function changeDisplay() { if ( document.mailform["BBB"][0].checked ) { document . mailform["YYY"] . disabled = true; document . getElementById('BBB-text') . style . display = "none"; } else { document . mailform["YYY"] . disabled = false; document . getElementById('BBB-text') . style . display = "inline"; } } window.onload = changeDisplay; //---------------------------------------------------------------------------- function changeDisplay() { if ( document.mailform["CCC"][0].checked ) { document . mailform["ZZZ"] . disabled = true; document . getElementById('CCC-text') . style . display = "none"; } else { document . mailform["ZZZ"] . disabled = false; document . getElementById('CCC-text') . style . display = "inline"; } } window.onload = changeDisplay;
- ベストアンサー
- JavaScript
- クラスの使い方
php5です。 --- test1.class.php --- class TEST1 { function hoge1() { // 実際に複雑な処理ですが概要として簡易化してます $aaa = 'hoge1'; // クラスの実行で単純に戻り値を返す return $aaa; } } --- test2.class.php --- class TEST2 { function hoge2() { // 実際に複雑な処理ですが概要として簡易化してます $bbb = 'hoge2'; // クラスの実行で単純に戻り値を返す return $bbb; } } --- MySmarty.class.php --- require_once 'test1.class.php'; require_once 'test2.class.php'; class MySmarty extends Smarty { function MySmarty() { //ここでclassTEST1,2の戻り値を利用しif文で分岐をしたい if ($aaa == 'hoge1') { $ccc = 'あああ'; } elee { $ccc = 'いいい'; } if ($bbb == 'hoge2') { $ddd = 'ううう'; } elee { $ddd = 'えええ'; } $this->assign('aaa', $aaa); $this->assign('bbb', $bbb); ・・・ } } このような使い方はできないものでしょうか？クラスに触れてまだ間も無く理解も深めれて いない状態で参考サイトなどを調べてみたのですがこのような使い方を書いている説明は みつかりませんでした。 思いつく方法としてはMySmartyに継承すればいいようなのですが継承は1つまでと 制限があるようでそれもできない状態です。 単純に1つのクラスにまとめて書けば済むような気もあるのですが他にも別のクラスの 戻り値を利用して分岐等をさせたく思っているのですがこの場合どうすればいいのでしょうか？ もし不可能な場合(可能だけど方法的に良くない場合)の別の方法としてアドバイスを 頂けますと幸いです！宜しくお願いします！
- 締切済み
- PHP
- javascriptで特定のオブジェクトのCSSの書換え
javascriptでCSSの書換えをしたいと思っているのですが、うまくいきません。 例えば、 <div class="aaa" style="z-index:0;">aaa</div> <div class="aaa" style="z-index:1;">bbb</div> <div class="aaa" style="z-index:2;">ccc</div> <div class="aaa" style="z-index:3;">ddd</div> <div class="bbb">111</div> <div class="bbb">222</div> <div class="bbb">333</div> このようにあったときに、≪z-indexの要素が1以上≫のclass="aaa"のオブジェクトを探して、該当するものの≪z-indexの値から-1する≫というような関数を作りたいのですが、ループの記述で困っています。 （prototype.jsを使うので、getElementsByClassNameは使えます。） 詳しい方、ご教授いただければ幸いです。
- ベストアンサー
- JavaScript
- ハイパーリンクをインプットボタンで作るには
HTML初心者です。 <a href="input.php?action=rewrite">修正する</a> 上記のハイパーリンクをインプットボタンでリンクさせたいのですが <input type="button" class="button" value="修正する" onClick='window.open("input.php?action=rewrite")'> だと新しいウィンドウが開いてしまいますし <input type="button" class="button" value="修正する" onClick=("input.php?action=rewrite")> だとリンクできません。 どのようにすれば良いのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- PHPの囲みかた
以下のPHPが動かない、画面が真っ白になってしまうのですがなぜでしょうか？ また<?php ?>でPHPは囲みますが、一画面で何回も囲んでも構わないでしょうか？ <input name="button" type="button" onclick="location.href='/abc.php'" value="abc"> <?php print ('<input type="button" value="aaa" onClick="location.href='/aaa.php'">'); ?> <input type="button" value="bbb" onClick="location.href='/bbb.php'">
- 締切済み
- PHP
- cookie.jsを使ってクッキーを利用する方法。
cookie.jsを使ってクッキーを利用する方法。 現在ジャバスクリプトにて、複数の画像、リンク、位置データがonClickで変わるように設定しています。 違うページに行き戻ると、置き換えられた画像のデータがなくなってしまいます。 cookie.jsを使えばいいと思い、その設定方法をいろいろと調べてみましたがわかりませんでした。 こういう場合は、ジャバスクリプトをどのように記入すれば良いのでしょうか。 よろしくお願いいたします。 <body> <a href="http://www.a01"> <img name="AAA" id="AAA" src="images/a01.jpg" style="position: absolute; top: 310px; left: 220px; z-index: 45;" border="0" /></a> <a href="http://www.b01"> <img name="BBB" id="BBB" src="images/b01.jpg" style="position: absolute; top: 227px; left: 363px; z-index: 120;" border="0" /></a> <a href="http://www.c01"> <img name="CCC" id="CCC" src="images/c01.jpg" style="position: absolute; top: 418px; left: 425px; z-index: 120;" border="0" /></a> <form> <input value="" title="clear" style="background: transparent url(images/clear.gif) no-repeat;" onclick="document.AAA.src='images/spacer.gif';document.links[0].href='#';" type="button" /> <div class="AAA"> <a href="#" class="prev_AAA">戻る</a> <a href="#" class="next_AAA">進む</a> <ul> <li> <input value="" title="" style="background: transparent url(images/a01.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer; " onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a01.jpg';document.links[0].href='http://www.a01'" type="button" /> </li> <li> <input value="" title="" style="background: transparent url(images/a02.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer; " onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a02.jpg';document.links[0].href='http://www.a02'" type="button" /> </li> </ul></div> ……………… </form></body>
- ベストアンサー
- JavaScript
お礼
とりあえず締め切ることにします。 ありがとうございました。 上司も納得してくれました。おかげさまです。
補足
な、なるほど・・・(^-^; ありがとうございました、無理なら無理とわかったほうが （上司に説明できて（ごほごほ））心理的に楽になりました。 クラスを変えたかった理由は「ボタンの表示文字列の色を 動的に変えたかったから」なのです。 （クラスの中にカラー指定を入れて、黒表示と白表示の クラスを２種類作ってみたのです） colorを直接動的に変えることも試してできなかったのですが、colorもプロパティになっていないので無理なのですよね？ それからこれはあつかましいお願いなのですが・・・ ＡＳＰ開発に最近携わり始めたのですが、構造型プログラミングしかしたことがなかったので、基礎的な知識をどうやって得たらよいかがいまいちわからないのです。 もしよろしければ、ＷＥＢ開発の必要な基礎知識を得るのに最適な文献などありましたら、お教えいだたけないでしょうか。 改めましてよろしくお願いします。