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

javascriptで外部CSSを一つのボタンで動的にon/offでき、その情報をクッキーに保存する、というサンプルを探しています。
ご存知でしたらご教示ください。

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

▽最新の回答へ

1 ● tabbycats
●35ポイント

styleswitcher.js

http://alistapart.com/stories/alternate/


こちらに詳しく書いてあります。

http://weblibrary.s224.xrea.com/weblog/webdesign/javascript/styl...


もしくは、「styleswitcher.js」で検索してみてください。

◎質問者からの返答

ありがとうございます。

サンプルの通りAタグをクリックでCSSを適用させることはできましたが、そのCSSをオフにするためにもう一つAタグが必要そうです。

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


2 ● GoldenDawn
●49ポイント ベストアンサー

書いてみました。

<!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 outerCss = true ;

 function changeCSS() {
 var cssLink = document.getElementById('mycss') ;
 cssLink.rel = outerCss ? 'stylesheet' : 'stylesheet-off' ;
 }

 function toggleCSS() {
 outerCss = !outerCss ;
 changeCSS() ;

 document.cookie = 'outercss = ' + outerCss ;
 }

 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() {
 if (getCookie('outercss') == 'false') {
 outerCss = false ;
 changeCSS() ;
 }
 }
 //-->
 </script>
 </head>

 <body>
 <form>
 <input type="button" onclick="toggleCSS();" value="css ON-OFF" />
 </form>
 </body>
</html>

http://q.hatena.ne.jp

◎質問者からの返答

ありがとうございます!

思った通りのものができました。

関連質問


●質問をもっと探す●



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