http://q.hatena.ne.jp/1219825934 の続きの質問です。

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

回答の条件
  • 1人2回まで
  • 登録:2008/08/28 13:07:32
  • 終了:2008/08/28 20:49:39

ベストアンサー

id:GoldenDawn No.3

GoldenDawn回答回数426ベストアンサー獲得回数812008/08/28 19:53:18

ポイント50pt
<!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>
id:kanigasuki

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

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

2008/08/28 20:48:51

その他の回答(2件)

id:amalfi-0219 No.1

amalfi-0219回答回数40ベストアンサー獲得回数52008/08/28 16:41:59

ポイント3pt

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


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


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

id:kanigasuki

ありがとうございます。

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

2008/08/28 17:06:32
id:GoldenDawn No.2

GoldenDawn回答回数426ベストアンサー獲得回数812008/08/28 17:39:13

ポイント27pt

改変してみました。

<!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>
id:kanigasuki

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

最高です!

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

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

2008/08/28 18:55:33
id:GoldenDawn No.3

GoldenDawn回答回数426ベストアンサー獲得回数812008/08/28 19:53:18ここでベストアンサー

ポイント50pt
<!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>
id:kanigasuki

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

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

2008/08/28 20:48:51

コメントはまだありません

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

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

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

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