人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

http://q.hatena.ne.jp/1219825934 の続きの質問です。
「javascriptで外部CSSを一つのボタンで動的にon/offでき、その情報をクッキーに保存する、というサンプルを探しています。
ご存知でしたらご教示ください。」
追加要件
・ボタンを押したらサイト全体のCSSが変わる
・動作はIE6以上firefox2以上OPERA9以上

●質問者: kanigasuki
●カテゴリ:ウェブ制作
✍キーワード:CSS IE6 JavaScript ON クッキー
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● amalfi-0219
●3ポイント

この辺りのサンプルはどうでしょうか。


http://hyper-text.org/archives/2007/10/css_switch.shtml


対応ブラウザ的にも要件を満たしていそうです。

◎質問者からの返答

ありがとうございます。

一つのボタンで動的にon/offしたいです。


2 ● GoldenDawn
●27ポイント

改変してみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <link rel="stylesheet" type="text/css" href="./test.css" id="mycss" />
 <style type="text/css">
 </style>
 <script type="text/javascript">
 <!--
 var isOuterCSS = true ;
 var outerCSS ;

 function toggleCSS() {
 isOuterCSS = !isOuterCSS ;
 outerCSS.disabled = !isOuterCSS ;
 document.cookie = 'outercss = ' + isOuterCSS ;
 }

 function getCookie(key) {
 var cookies = document.cookie.split(';') ;
 for (var i = 0; i < cookies.length; ++i) {
 var theCookie = cookies[i].split('=', 2) ;
 if (theCookie[0] == key) return unescape(theCookie[1]) ;
 }
 return undefined ;
 }

 onload = function() {
 outerCSS = document.getElementById('mycss') ;
 if (getCookie('outercss') == 'false') toggleCSS() ;
 }
 //-->
 </script>
 </head>

 <body>
 <form>
 <input type="button" onclick="toggleCSS();" value="css ON-OFF" />
 </form>
 </body>
</html>
◎質問者からの返答

度々ありがとうございます

最高です!

最高ついでにもう一つだけお願いします。

デフォルトをCSSオフにするにはどうしたらよいでしょうか


3 ● GoldenDawn
●50ポイント ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <script type="text/javascript">
 <!--
 var CSSPath = './test.css' ; // CSS ファイルのパス
 var outerCSS ;

 function toggleCSS() {
 outerCSS.disabled = !outerCSS.disabled ;
 document.cookie = 'outercss = ' + !outerCSS.disabled ;
 }

 function getCookie(key) {
 var cookies = document.cookie.split(';') ;
 for (var i = 0; i < cookies.length; ++i) {
 var theCookie = cookies[i].split('=', 2) ;
 if (theCookie[0] == key) return unescape(theCookie[1]) ;
 }
 return undefined ;
 }

 onload = function() {
 outerCSS = document.createElement('link') ;
 with (outerCSS) {
 rel = 'stylesheet' ;
 type = 'text/css' ;
 href = CSSPath ;
 }
 document.getElementsByTagName('head')[0].appendChild(outerCSS) ;
 outerCSS.disabled = true ;
 if (getCookie('outercss') == 'true') toggleCSS() ;
 }
 //-->
 </script>
 </head>

 <body>
 <form>
 <input type="button" onclick="toggleCSS();" value="css ON-OFF" />
 </form>
 </body>
</html>
◎質問者からの返答

結構書き直していただいたみたいですみませんでした。

ありがとうございました!!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ