Javascript - CSSの切り替えデモプログラム

下記のボタンで3種類のCSS「レスポンシブ」「PC用」「スマホ用」を切り替えます。

単純にCSSを差し替えてるだけなので、複数の外部CSSファイルを準備すれば部分的にカラーやデザインなどの装飾を変更する事も可能。

Demoブログ

今日の日記

2016/01/02 19:05 管理者

左側

左側

カテゴリー

右側

右側

右側

(っ)1999 無限会社フッタ

HTML(head)

外部CSSをid属性(id="style")を付けてロード


      <link rel="stylesheet" type="text/css" href="js_css_change_com.css" id="style" />

Javascript

指定されたIDの href(ファイル名)を書き換えるスプリクト。デモでは上記のid=style のファイル名を書き換える。


      function css_change_demo(id,file){
        document.getElementById(id).href = file;
      }

HTML(body)

Javascritpを実行するボタン。第一引数にはID名(=style)、第二引数にファイル名を指定する。


      <p><input type="submit" value="タイトル" onclick="css_change_demo('style',CSSファイル名);" /></p>

備考

　複数のCSSを作らなければならないので不便、共通項目は別のlinkでロードすれば影響を受けない。

　SEOを考慮すると、このデモのように初期状態ではPCとスマホ両対応のレスポンシブCSSを読み込ませ後からPC専用かスマホ専用のCSSに切り替えさせるのが良いと思われる。

　このスプリクトはページ内でのみ有効なので、複数ページで表示方法を引く次ぐには別途クッキーなどを併用する必要がある。

http://www.achiachi.net/