- ベストアンサー
CSS（スタイルシート）を切り替えるJavascriptについて
- CSS（スタイルシート）を切り替えるJavascriptのサンプルについて
- 既存のラジオボタンやプルダウンメニューを使用せずに画像を用いたボタンでCSSを切り替える方法について
- 「selectMode」関数を使用して、Javaでボタンの制御が可能か
- fair-weather
- お礼率66% (2/3)
- Java
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.1です。 >例えばstyletitle = "none"のような記述ではダメなのでしょうか？ いや、判断する方法は何でもいいと思いますよ。 setModeの内容は変えずに、 var styletitle = ''; //追加 function selectMode(){ //引数を削除 styletitle = styletitle === '' ? 'change' : ''; //styletitleが''ならchangeに、何かしら設定されている場合は''に変更する if (document.getElementById){ setMode(styletitle) } } とでもしておけば、 <a href="javascript:selectMode()"><img alt="1" src="/mode1.gif" width="10" height="10" /></a> の一つだけで切り替えられます。 No.2さんのやり方も読んでみるといいと思います。 余談ですが、この質問ならカテゴリは「Java」ではなく「Javascript」が適切です。
その他の回答 (2)
- yuu_x
- ベストアンサー率52% (106/202)
[CSS] .mode input { padding : 0; width : 10px; height : 10px; background-image : url('mode.gif'); /* mode.gif 20px×10px 0px-10px×10px : default image 10px-20px×10px : altarnate css image */ border-width : 0; cursor : pointer; } .mode input.alternate { background-position : -10px 0; } [/CSS] [HTML] <div class="mode"> <script type="text/javascript"> /*@cc_on@*/ (function (doc) { (function (b) { (function (p, onclick) { b.type = 'button'; b./*@if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/'click', onclick, false); p.appendChild(b); }) ( (function () { var s = doc.getElementsByTagName('SCRIPT'); return s[s.length - 1].parentNode; }) (), function (e) { doc.styleSheets[0].disabled = !doc.styleSheets[0].disabled; doc.styleSheets[1].disabled = !doc.styleSheets[0].disabled; b.className = doc.styleSheets[0].disabled ? 'alternate' : ''; } ); }) ( doc.createElement('INPUT') ); }) (document); </script> <noscript></noscript> </div> [/HTML]
お礼
お返事が遅くなってしまい申し訳ありません。 CSSの扱い方次第で、ひとつの画像でもスイッチを表現できるのですね。 今の私には少し難しく感じましたが、とても勉強になりました。 早々に回答していただき、本当にありがとうございました！
- yamada_g
- ベストアンサー率68% (258/374)
とても単純なやり方ですが。 on/offのみなら、現在の状態を保持する変数を用意しておいて、 selectMode内でその値を参照して処理を判断し、値を書き換えるようにしておけばいいのではないですか？ var change = true; function selectMode() { if (change) { 処理; } else { 処理; } change = !change; } のような感じで。
補足
回答いただきありがとうございます！ >selectMode内でその値を参照して処理を判断し、値を書き換える… その通りです。そんなスクリプトの記述をイメージしておりました。 参考に書いていただいた内容について、もう少し質問させて下さい。 まず、各々の処理は「styletitle」の値に「none」または「change」を代入する記述になると思うのですが、例えばstyletitle = "none"のような記述ではダメなのでしょうか？ また、こちらの条件式を追記する場合、現状のスクリプトで不要になる箇所や変更点があればご指摘いただけますと幸いです。 お時間がありましたら、返答をよろしくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
あれから記述を何度も読み返す中で、なんとか解決する事ができました。 この度は、ご丁寧に解説して下さり本当にありがとうございました！
補足
ご報告が遅くなってしまい申し訳ありません。 先日、教えていただいた記述が他のスクリプトとバッティングしている事に気が付けず、見当違いな事に時間を費やしておりました。記述する場所を考慮した結果、下記の設定でON/OFFの動作を確認できました。 var styletitle = 'default'; function selectMode() { styletitle = styletitle === 'default' ? 'change' : 'default'; if (document.getElementById){ setMode(styletitle) } } ※mode1.cssの設定にtitle="default"を追記しております。 こちらでスイッチとして機能はしているのですが、変数「styletitle」の初期値が不適切なせいでしょうか、"change" の状態（cookieで保持）からページをリロード後、"change" から "default" に切り換える際、ボタンを2度押さなければ反応してくれません。 こちらの件について、お気付きの点がありましたら再度ご連絡いただけますでしょうか？ 度々で誠に恐れ入りますが、よろしくお願いします。