CSS（スタイルシート）を切り替えるJavascriptについて
- CSS（スタイルシート）を切り替えるJavascriptのサンプルについて
- 既存のラジオボタンやプルダウンメニューを使用せずに画像を用いたボタンでCSSを切り替える方法について
- 「selectMode」関数を使用して、Javaでボタンの制御が可能か
- ベストアンサー
CSS（スタイルシート）を切り替えるJavascriptについて
CSS（スタイルシート）を切り替えるJavascriptについて 現在、表題のスクリプトサンプルに少し変更を加えたいと思い悩んでいます。 その内容ですが、サンプルでは切り替えるCSSの数だけボタンを配置する仕組みのようなのですが、当方では切り替えたいCSSが1種のため、ボタンもON/OFFのような単体にできればと思っています。 既存のラジオボタンやプルダウンメニューなどを使用した例はいくつか紹介されていましたが、できれば画像を用いたボタンで作りたいと考えています。 以下、サンプルからの抜粋となりますが、もしもご存知の方がいらっしゃいましたら回答いただけますと幸いです。 /* html */ <head> <link rel="stylesheet" type="text/css" href="/mode1.css" /> <link rel="alternate stylesheet" type="text/css" title="change" href="/mode2.css" /> </head> <body> <div class="mode"> <a href="javascript:selectMode('none')"><img alt="1" src="/mode1.gif" width="10" height="10" /></a> <a href="javascript:selectMode('change')"><img alt="2" src="/mode2.gif" width="10" height="10" /></a> </div> </body> ※ボタンに使用する画像は1種でも構いませんので、<a>タグをひとつにしてselectMode( )内の値をJavaの方で制御できないでしょうか？ /* javascript */ function setMode(title) { var i, objs for(i=0; (objs=document.getElementsByTagName("link")[i]); i++) { if(objs.getAttribute("rel").indexOf("style") != -1 && objs.getAttribute("title")) { objs.disabled = true if(objs.getAttribute("title") == title) objs.disabled = false } } } function selectMode(styletitle){ if (document.getElementById){ setMode(styletitle) } } 言葉たらずの質問ですが、どうぞよろしくお願いします。
- 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"のような記述ではダメなのでしょうか？ また、こちらの条件式を追記する場合、現状のスクリプトで不要になる箇所や変更点があればご指摘いただけますと幸いです。 お時間がありましたら、返答をよろしくお願いします。
関連するQ&A
- javascriptにてcss切り替え
現在webサイトを作成しており、javascriptのcss切り替えにてページの色変更を作っています。 (青、緑、赤、三色で作成) デフォは青で表示しています。 その後緑、赤とリンクで色が変わるようにしています。 ここでご質問です。 緑をクリックした場合は緑に変わる(赤も同様)のですが、別ページにリンクした場合、緑(赤)ではなく青に戻ってします。 別ページにとんでも緑(赤)が引き継がれるにはどのように記述したらよろしいでしょうか? ソースは以下のとおりです。 <head> <link rel="stylesheet" type="text/css" href="css/blue/top.css" media="all" /> <script src="js/styleswitch.js" type="text/javascript"></script> <link rel="alternate stylesheet" type="text/css" title="blue" href="css/blue/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="green" href="css/green/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="red" href="css/red/top.css" media="all" /> </head> <body> <div style="width:200px;"> <a href="javascript:chooseStyle('blue', 30)">青</a><br /> <a href="javascript:chooseStyle('green', 30)">緑</a><br /> <a href="javascript:chooseStyle('red', 30)">赤</a> </div> </body> javascriptは以下のところからしようしています。 http://noongoro.main.jp/note/note0059.html javascriptは初心者です。 ご教授お願いいたします。
- ベストアンサー
- JavaScript
- ブラウザの解像度横幅1280の時スタイルシートを記述したいのですが
記述が間違ってると思われうまくいきません。 どなたか間違ってるところを指摘してくださいませ。。 初心者ですお願い致します。 <html> <head> <title>モニタサイズに合わせてウィンドウサイズを変更する</title> <script Language="JavaScript"><!-- w = screen.width; moveTo(0,0); if (w == 1280) { document.write ("<link rel=stylesheet href="'+ a.css +'" type="text/css">"); } else if () { document.write("<link rel=stylesheet href="'+ b.css +'" type="text/css">"); } // --></script> </head> <body> </body> </html> なおa.cssには、背景黒くしてます。
- 締切済み
- JavaScript
- javascriptをＣＳＳに書き込むと動作しません。何故ですか？
下記のjavascriptをＣＳＳに書き込みました。拡張子は.jsとしました。 jsのフォルダにtopmuv.jsというファイル名にしました。 <script type="text/javascript"> <!-- function blink() { if (!document.all) { return; } for (i = 0; i < document.all.length; i++) { obj = document.all(i); if (obj.className == "blink") { if (obj.style.visibility == "visible") { obj.style.visibility = "hidden"; } else { obj.style.visibility = "visible"; } } } setTimeout("blink()", 500); } // --> </script> </head> <body onload="blink()"> htmlの読み込みは <LINK rel="stylesheet" href="js/topmuv.js" type="text/javascript"> と書いています。 この場合、上記javascriptのソースをシート上にダイレクトに書き込むと正常に動作しますがｃｓｓにすると動作しません。 何が悪いのでしょうか？ 詳しい方宜しくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- 時間帯によって背景を切り替えるJavascriptとCSS
時間帯によって背景を切り替えるJavascriptとCSSを作りたいのですが以下の書き方で良いのでしょうか？切り替わるには切り替わるのですが、時間の指定がうまくいってないようです。。 また下の3行はJavascriptをOFFにしているときはこのCSSという意味で良いですか？ <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function getCSS() { datetoday = new Date(); timenow=datetoday.getTime(); datetoday.setTime(timenow); thehour = datetoday.getHours(); if (thehour > 20) display = "includes/tree_twilight.css"; else if (thehour > 17) display = "includes/tree_sunset.css"; else if (thehour > 14) display = "includes/tree_afternoon.css"; else if (thehour > 11) display = "includes/tree_noon.css"; else if (thehour > 7) display = "includes/tree_morning.css"; else if (thehour > 4) display = "includes/tree_sunrise.css"; else if (thehour > 1) display = "includes/tree_twilight.css"; else display = "includes/tree_sunset.css"; var css = '<'; css+='link rel="stylesheet" href=' + display + ' \/'; css+='>'; document.write(css); // End --> } </script> <script language="javascript">getCSS();</script> <noscript> <link rel="stylesheet" href="includes/tree_sunset.css" type="text/css"/> </noscript> 宜しくお願いします。。
- ベストアンサー
- JavaScript
- 引数を2個使いたい場合 Javascript
こんにちは。 Javascriptについてアドバイスお願いします。 ■やりたいこと 「普通」「大きい」と言うテキスト画像をクリック することでCSSを入れ替える。 ・外部JSにしたい ・<input>のボタンではなく画像を使う ・一つのページで使うCSSは2種類（共通.cssと各頁ごとの設定用） 作ってみたスクリプトは下記の通りです。 function chooseCSS(csstype,cssname){ if(csstype == "normal"){ document.getElementById("baseCSS").href = "base.css"; document.getElementById("eachCSS").href = cssname + ".css";} else{ document.getElementById("baseCSS").href = "base2.css"; document.getElementById("eachCSS").href = cssname+"2.css";} } --------------------------------------------- HTMLの記述 ☆head内 <link href="base.css" rel="stylesheet" type="text/css"> <link href="base.css" rel="stylesheet" type="text/css" id="baseCSS"> <link href="top.css" rel="stylesheet" type="text/css"> <link href="top.css" rel="stylesheet" type="text/css" id="eachCSS"> ☆body内 <a href="javascript:void(0)" onClick="chooseCSS('normal','top')"><img src="img/btn01.gif" border="0" class="normal"></a> <a href="javascript:void(0)" onClick="chooseCSS('big','top')"><img src="img/btne02.gif" border="0" class="big"></a> --------------------------------------------- ローカルでは動いていたのでサーバーにUPしたらネスケとsafariは動作するのにIE（JSの設定は有効になっていました）だけ動かなくなりました。 あまりJavascriptは得意ではないので どなたかアドバイスお願いいたします！
- ベストアンサー
- JavaScript
- JavaScriptからCSSを呼び出す方法
現在、Noscript時とJavaScript稼働時の呼び出すCSSを分けるため、下記のような設定をしています。whole.cssからJavaScript稼働時のCSSをimportしています。 IE6エラー内容は「'framename' が宣言されていません」です。 記述 <link href="whole.css" rel="stylesheet" type="text/css" id="css"/> <script> framename.document.getElementById ('css').href = 'whole.css'; </script> JavaScript稼働時に呼び込む設定となっています。 IE6のエラー以外他ブラウザーは正常に表示されます。 よろしくお願いします。
- 締切済み
- JavaScript
- HPの文字の大きさを変えるCSSがうまくいきません
ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。
- ベストアンサー
- HTML
- 特定のclassを表示、非表示にする
javascriptで特定のclassを表示、非表示にする方法を検討中なのですが、 a,b,cと三つのボタンが有り、abcというclassがあります。 aをクリックするとb,cが非表示になり、aが表示される bをクリックするとa,cが非表示になり、bが表示される cをクリックするとa,bが非表示になり、cが表示される と言う動作をさせたいのですが、上手くいきません。 どなたかご教授ください。 お願いいたします。 <script type="text/javascript"> <!-- function change(site){ if(!document.getElementsByTagName){return;} var e = new Array('a','b','c'); var objs = document.getElementsByTagName('*'); for(i=0;i<e.length;i++){ if(e[i] != site){ for(y=0;y<objs.length;y++){ if(objs[y].className == e[i]){ objs[y].style.display = 'none'; }else{ objs[y].style.display = ''; } } } } } // --> </script> <table cellspacing="10"> <tr> <th>テスト</th> <td> <input type="text" name="" id="" class="a" value="" /> <input type="text" name="" id="" class="b" value="" /> </td> </tr> <tr> <th>test</th> <td> <input type="text" name="" id="" class="c" value="" /> </td> </tr> </table> <a href="javascript:change('a')">a</a> <a href="javascript:change('b')">b</a> <a href="javascript:change('c')">c</a>
- ベストアンサー
- JavaScript
- ブラウザ／OS／バージョン別にスタイルシートを読み込む
私の考え違いか わかるかた教えて下さい。 JavaScript例文辞典のブラウザ／OS／バージョン別にスタイルシートを読み込む http://www.openspc2.org/reibun/javascript/browser/013/index.html document.write("<link rel='stylesheet' type='text/css' href='../c_f/m_ta01.css'>");}によりスタイルシートを読み込む では、IEでは、ブラウザ／OS／バージョン別にスタイルシートを読み込む ことが出来ません。 SAFARIとGoogle Chromeでは、ブラウザ／OS／バージョン別にスタイルシートを読み込む ことが出来ますが。 JavaScriptで代替CSSを適用する方法 http://www.usamimi.info/~geko/arch_web/02_sample/018/index.html <link rel="stylesheet" href="../c_f/m_rn1o.css"> <link rel="alternate stylesheet" href="../c_f/o_ie01.css" title="ie"> <link rel="alternate stylesheet" href="../c_f/o_ta01.css" title="ta"> 上記３行の指定で代替スタイルの指定をJavaScriptで指定する では、IEやFIREFOXでは、ブラウザ／OS／バージョン別にスタイルシートを読み込む ことが出来ますが。 SAFARIとGoogle Chromeでは、ブラウザ／OS／バージョン別にスタイルシートを読み込む ことが出来ません。 何か簡単に、ブラウザ／OS／バージョン別にスタイルシートを読み込むことが 出来ませんか。
- 締切済み
- JavaScript
- css,javascriptの呼び出しについて
某サイトで、 cssの呼び出しで <link rel="stylesheet" href="xxxx.css?v=yyyyyy" > javascriptの呼び出しで <script src="xxxx.js?v=yyyyyy"> という記述がされていました。 phpスクリプトではよく見かける?v=yyyyyyという記述ですが、cssとjavascriptでは見かけた事がないので色々と調べたのですが、答えが見つかりません。 上記に示した様な記述方法は一般的なものなのでしょうか？ 取り留めのない質問ですがよろしくお願い致します。
- ベストアンサー
- CSS
お礼
あれから記述を何度も読み返す中で、なんとか解決する事ができました。 この度は、ご丁寧に解説して下さり本当にありがとうございました！
補足
ご報告が遅くなってしまい申し訳ありません。 先日、教えていただいた記述が他のスクリプトとバッティングしている事に気が付けず、見当違いな事に時間を費やしておりました。記述する場所を考慮した結果、下記の設定で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度押さなければ反応してくれません。 こちらの件について、お気付きの点がありましたら再度ご連絡いただけますでしょうか？ 度々で誠に恐れ入りますが、よろしくお願いします。