CSSの切り替え方法とデフォルト設定について
- CSSの切り替えを別ページで継承する方法について説明します。
- 要素の背景画像をボタンクリックで変えるためのCSSとJavascriptの記述方法を紹介します。
- デフォルトのCSS設定を維持し、ページ移動しても選択したCSSが保持される方法について解説します。
- ベストアンサー
CSSの切り替えを別ページで継承するには？
CSS＋Javascriptで CSSの切り替えを設置したいと思っています。 ボタンを押すと背景画像が変わるような仕組みにしようと思っていて、 <link href="bg1.css" rel="stylesheet" type="text/css" media="all" id="extCSS" /> <script type="text/javascript"><!-- function changeCSS(sURL) { document.getElementByld("extCSS").href = sURL; } //--></script> 中略 <input type="button" value="BG1" onClick="changeCSS('bg1.css')"><br /> <input type="button" value="BG2" onClick="changeCSS('bg2.css')"><br /> <input type="button" value="BG3" onClick="changeCSS('bg3.css')"> 雑誌を参考に、上記のようなCSSの切り替えを作成しました。 （まだエラーで動いていないのですが・・・） ただ、例えばTOPページにこれを設置した場合、ユーザーがbg3.cssを選んだとしても、別のページに移動したときに、デフォルトのbg11.cssに戻ってしまうような気がします。 これをページを移動するたびにデフォルトに戻らないようにすることは可能なのでしょうか？
- oec001
- お礼率100% (1/1)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
切り替えした時にその内容をcookieに保存し、 各ページでは最初に、cookieを読んでcssを切り替えます。 javascriptによるcss切り替えのサンプルの中には、こうした仕組みも取り入れたものがあると思うのでもうちょっと（ネットで）探してみてはどうでしょうか。
関連するQ&A
- htmlでの表示の切り替えです。
こんにちは。 htmlを用いて課題を作っています。 チェックボックスを用いてその結果によってページ内に表示される文章を切り替えたいのですが、 うまくいきません。 <form name="chbox"> <input type="checkbox" value="ハンバーグ">ハンバーグ<br> <input type="checkbox" value="わかめスープ">わかめスープ<br> <input type="checkbox" value="ほうれんそうのおひたし">ほうれん草のおひたし<br> <input type="checkbox" value="サラダ">サラダ<br> <input type="checkbox" value="うどん">うどん<br> <input type="checkbox" value="バター">バター<br> <input type="button" value="オッケー" onclick="BoxCheck()"> </form> こんな風なjavaを用いているのですが・・・ 初心者なので至らぬ点はあると思いますがよろしくお願いします。 <script type="text/javascript">
- 締切済み
- HTML
- javascript iframeについて
iframeにてアンケート的な物を作成しています。 ページは13ページくらいです ボタンを押すと次のページに移動し、さらに親のテキストエリアに選択したボタンの文言が上から保存されていくようにしたいのですが ↓は子のiframe内ですが、どのようにしていいかわからなくて、、 <html> <head> <link href="./if.css" rel="stylesheet" type="text/css"> </head> しつもん1<br><br> <form name="test"> <input type="button" name="001" value="戸館"onClick="kakunin(1)";onClick="setChars('AAAA')")><br><br> <input type="button" name="002" value="集合住宅" onClick="kakunin(2)"> </form> <form name="myFORM"> <textarea name="myTEXT"rows="10"></textarea><br> <!-- ↓ ここから先はJavaScript！！！ --!> <script type="Text/Javascript"> function setChars(text) { if (document.myFORM.myTEXT.value || "") { document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + "\n" } document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + text } function kakunin(btnNo){ if (btnNo == 1){ link = "戸館"; href = "EN002.html"; }else{ link = "集合住宅"; href = "EN002m.html"; } ret = confirm(link + "でよろしいですか？"); if (ret == true){ location.href = href; } } </script> </html> よろしくお願いいします。
- ベストアンサー
- JavaScript
- ＨＰボタンの長さが異なる。
下のボタンが マックの「IE4.5」「IE5.0」「ネスケ4.7」だとちゃんと奇麗に中央に表示されますが、 Windows「IE4.5」「IE5.0」はボタンの長さが異なり ガタガタになります。 windowsでも奇麗に並べるにはどうしたらいいのでしょうか？ よろしくご指導お願いいたします。 テストでアップしてあるＵＲＬですのでご確認してください。 http://watn.jp/test/ <HTML> <HEAD> <TITLE>++++</TITLE> </HEAD> <!------------------- 中身-------------------> <center> 下のボタンがマックの「IE4.5」「IE5.0」「ネスケ4.7」だと<br> ちゃんと中央に表示されますが、Windows「IE4.5」「IE5.0」は<br> ボタンの長さが異なりガタガタになります。 <FORM> <INPUT TYPE="button" VALUE=" ●●・・◇◇◇ " onClick="window.location.href='kituke.html'"><br> <INPUT TYPE="button" VALUE=" ・・◇◇◇◇ " onClick="window.location.href='sadou.html'"><br> <INPUT TYPE="button" VALUE=" ・・◇◇◇◇◇ " onClick="window.location.href='buyou.html'"><br> <INPUT TYPE="button" VALUE=" ●●・・◇◇◇ " onClick="window.location.href='ivent.html'"><br> <INPUT TYPE="button" VALUE=" ・・◇◇◇◇ " onClick="window.location.href='tenjikai.html'"><br> <INPUT TYPE="button" VALUE=" ◇◇◇ " onClick="window.location.href='butai.html'"><br> <INPUT TYPE="button" VALUE=" ◇◇◇◇ " onClick="window.location.href='honten.html'"><br> <INPUT TYPE="button" VALUE=" ◇◇◇◇◇ " onClick="window.location.href='yono.html'"><br> </FORM> </center> </BODY> </HTML>
- ベストアンサー
- その他（インターネット・Webサービス）
- 新規ウインドウから他のページにいけますか？
JavaScriptのwindow.openでページを表示した時に小さな別Windowも表示させるようにしています。 その画面を閉じるのに <input type="button" value="CLOSE" onclick="window.close()"> をクリックすると閉じるのですが、もう一つボタンを付けてそのボタンをクリックするとTOPページに戻るようにしたいんです。 location.href = "URL";で他のページにいけるんですよね？ ボタンを表示させるには <input type="button" value="TOP" onclick="window.location.href="URL";"> でいいのでしょうか？ やってみたのですが何も動きません。 どなたかわかる方、教えて頂けないでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptで別窓で出したページとメインページで同時に動作を行ないたいのですが、教えて下さい。
javascriptで別窓で出したページを登録ボタンを押すと、そのページが閉じて メインページがボタンを押したことで、切り替わるという動作を行ないたいのですが、 良い方法はありますか？教えてください。 <INPUT type='button' value='登録' onClick=\"opener.location.href='$order'\"> <A href=\"javascript:click_close();\">ウィンドウを閉じる</A> 今は、２つのリンクを貼っています。これを一つにしたいのですが、ご伝授下さい。 function click_close () { window.close(); }
- ベストアンサー
- 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
- htmlで表示切り替えがしたいです。
こんにちは。 htmlを用いて課題を作っています。 チェックボックスを用いてその結果によってページ内に表示される文章を切り替えたいのですが、 お力かしていただけないでしょうか？ <form name="chbox"> <input type="checkbox" value="ハンバーグ">ハンバーグ<br> <input type="checkbox" value="わかめスープ">わかめスープ<br> <input type="checkbox" value="ほうれんそうのおひたし">ほうれん草のおひたし<br> <input type="checkbox" value="サラダ">サラダ<br> <input type="checkbox" value="うどん">うどん<br> <input type="checkbox" value="バター">バター<br> <input type="button" value="オッケー" onclick="BoxCheck()"> </form> javascriptをもちいるチェックボックスを考えています。 例えばハンバーグ、わかめスープにチェックをつけた場合 ページの下の方に、肉、海藻という文を表示してそこからリンクへ飛ばすようにしたいんです。 初心者で説明が不十分かもしれませんが、こんな文をかけばいけると思うというアイディアあればお願いします。
- ベストアンサー
- HTML
- HTMLのパスワードページ
htmlのパスワードを作りましたが画面にあるENTERのボタンを必ず押さなければいけないのですがそれをキーボードのENTERキーにする方法はありませんか？ <div> <body bgcolor="#000000"> </div> <div align="center"> <img src="baka2.png" width="350" height="350" alt=""><br><br><br><br> <html> <head> <title>特別課外活動部パスワード入力</title> <script type = "text/javascript"> <!-- function matchPass() { var inpass = document.forms[ "pass" ].elements[ "inpass" ].value; var validpass = "baccano"; if( inpass == validpass ) location.href = "main.html"; else alert( "パスワードが間違っています。登録されてない場合は先に登録してください" ); } </script> <link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/tadaima/tdftad.css" /></head> <body> <form name = "pass"> <div> <input type = "password" value = "" name = "inpass"> <input type = "button" value = "ENTER" onclick = "matchPass();"> </div> </form>
- 締切済み
- HTML
- javaで name=id［?］ を指定する方法とは？
ショップ運営で、商品一覧から＋－ボタンでそれぞれ数の増減をさせるよう、ほかのサイトを参考にして下記のようにjavascriptで記述してみました。 このうち、商品２と３はボタンが機能したのですが、商品１は数の増減ができません。 おそらく要素名に（name=id[1]）と［］で囲っているからだと思うのですが、この［］を取らないまま、ボタンを機能させる方法はありますでしょうか？ よろしくお願いします。 <FORM> 商品１：<INPUT type=text name=id[1] value=3 size=4> <INPUT type=button value="＋" onClick="plus(this.form.id[1])"> <INPUT type=button value="－" onClick="minus(this.form.id[1])"> <BR> 商品２：<INPUT type=text name=id2 value=3 size=4> <INPUT type=button value="＋" onClick="plus(this.form.id2)"> <INPUT type=button value="－" onClick="minus(this.form.id2)"> <BR> 商品３：<INPUT type=text name=id3 value=3 size=4> <INPUT type=button value="＋" onClick="plus(this.form.id3)"> <INPUT type=button value="－" onClick="minus(this.form.id3)"> </FORM> <SCRIPT language="JavaScript"> <!-- function plus(chk){chk.value++; if (chk.value==6) {chk.value=5} } function minus(chk){chk.value--; if (chk.value==0) {chk.value=1} } // --> </SCRIPT>
- ベストアンサー
- JavaScript
- JavaScriptで得た値を別ページに反映
JavaScriptで得た値を別ページに反映させたいと思っています。 同一ページでは上手くいきますが、別ページへの反映ができません。 教えてください、宜しくお願いします。 同一ページのサンプル <html> <head> <title>aa</title> <Script LANGUAGE='JavaScript'> <!-- function fncDisp() { label1.innerHTML = document.form1.txt.value; } --> </Script> </head> <body> <form name='form1' action=''> <div id='label1'>ここに表示</div> <input type='text' name='txt' value=''> <input type='button' name='btn' value='ボタン' onClick='fncDisp()'> </form> </body> </html>
- 締切済み
- JavaScript
お礼
ご回答いただきありがとうございました！ ネットでいろいろ検索したところ、目的にあったスクリプトを見つけることができました。 http://readygo.s8.xrea.com/php/php_fs02.php クッキー関連は他にも応用ができそうなので、もうちょっと勉強したいと思います。 ありがとうございました＾＾