[CSS]Javascriptでスタイルシートを切り替えてフォントサイズ変更

Javascriptを用いてCSSを切り替えるスクリプトを利用して、フォントサイズを大、中、小に切り替えれるようにしてみました。

実装したのは初心者のためのPC用語講座です。

利用方法は簡単で、まずはAlternative Style: Working With Alternate Style Sheetsにてスクリプトをダウンロードします。

これをhead内で呼び出します。スクリプトで利用するスタイルシートも呼び出します。
— HTML —

<head>
<link rel="stylesheet" type="text/css" href="style.css" title="standard">
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="alternate1">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="alternate2">
<script type="text/javascript" src="styleswitcher.js">
</head>

ポイントは、変更するフォントのスタイルシートをrel=”alternate stylesheet”で呼び出す事。title=は処理を判断する時の名前だとでも思ってください。

— HTML続き —

<body>
<a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">小</a> -
<a href="#" onclick="setActiveStyleSheet('standard'); return false;">中(標準) -
<a href="#" onclick="setActiveStyleSheet('alternate2'); return false;">大</a>
<div id="contents">
ここのサイズが変わります
</div>
</body>

style.cssには

#contents{font-size:100%;}

style1.cssには

#contents{font-size:80%;}

style2.cssには

#contents{font-size:120%;}

と記述しておけば完成です。
あとは、それぞれクリックすれば、文字サイズが変更されます。

参考ページ:JavaScriptを使ったCSSの切り替え



シェアする

  • このエントリーをはてなブックマークに追加

フォローする