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

Question

kanigasuki

60

59もっと見る

84pt

ウェブ制作

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

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

回答の条件

URL必須
1人2回まで

登録：2008/08/27 17:32:46
終了：2008/08/27 19:49:12

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

tabbycats1432008/08/27 18:16:52

35pt

styleswitcher.js

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

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

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

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

ありがとうございます。

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

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

2008/08/27 18:52:52

kanigasuki 2008/08/28 12:46:21

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

人力検索はてな http://q.hatena.ne.jp/1219825934　の続き.. 2008-08-28 13:07:38

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

GoldenDawn · Accepted Answer · 2008-08-27T19:24:35+09:00

書いてみました。

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

GoldenDawn · Accepted Answer · 2008-08-27T19:24:35+09:00

書いてみました。

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

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

ベストアンサー

GoldenDawn426812008/08/27 19:24:35

その他の回答（1件）

tabbycats1432008/08/27 18:16:52

GoldenDawn426812008/08/27 19:24:35ここでベストアンサー

コメント（1件)

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

トラックバック