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

ご存知でしたらご教示ください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/08/27 17:32:46
  • 終了:2008/08/27 19:49:12

ベストアンサー

id:GoldenDawn No.2

GoldenDawn回答回数426ベストアンサー獲得回数812008/08/27 19:24:35

ポイント49pt

書いてみました。

<!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

id:kanigasuki

ありがとうございます!

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

2008/08/27 19:49:04

その他の回答(1件)

id:tabbycats No.1

tabbycats回答回数14ベストアンサー獲得回数32008/08/27 18:16:52

ポイント35pt

styleswitcher.js

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


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

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


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

id:kanigasuki

ありがとうございます。

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

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

2008/08/27 18:52:52
id:GoldenDawn No.2

GoldenDawn回答回数426ベストアンサー獲得回数812008/08/27 19:24:35ここでベストアンサー

ポイント49pt

書いてみました。

<!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

id:kanigasuki

ありがとうございます!

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

2008/08/27 19:49:04
  • id:kanigasuki
    GoldenDawnさんに書いていただいたスクリプトですが、Firefox2とOPERA9で動作できませんでした。
    また要件が足りなかったのですが、一つのボタンを押したらサイト全体のフォントサイズが変更できるようにしたいです。
    あらためて質問しますので、よろしかったらお願いします。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません