課題(2): スタイルシートの切り替えの準備をする

課題(2): スタイルシートの切り替えの準備をする
HTMLファイルを編集して、スタイルシートを切り替えるプログラムを追加します。
スクリプトをHTMLファイルに組み込む
スタイルシートを指定した link タグ内に id="cssid" の属性を書き加えます。
＜/head＞の直前にスクリプト（プログラムの一種）を書き加えます。スクリプトのみ部分だけを、下に書いておきまし
た。コピーして使ってかまいません。「第10回のCSSファイル名」というところは、第10回の課題のCSSファイル名（0622
学籍番号.css）に書き換えてください。
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
<link id="cssid" rel="stylesheet" href="第10回のCSSファイル名" type="text/css">
<script type="text/javascript">
<!-function replace_css(id,url){
if(!document.getElementById) return false;
var element = document.getElementById(id);
if(!element ￨￨ !element.cloneNode) return false;
var new_node = element.cloneNode(true);
new_node.href = url;
element.parentNode.replaceChild(new_node,element);
return true;
}
// -->
</script>
修正結果は、次の図ようになります。
なお、図の中の「style.css」の部分は、前回の課題で作成したCSSファイルと読み替えてください。
切り替えのためのタグを記述する
タイトルと目次の間、またはプロフィールの次あたりにスクリプトを使うためのタグを追加します。
-1
<a href="#" onclick="replace_css('cssid','CSSファイルの名前');">基本</a>
（注：「CSSファイルの名前」には、前回の課題のCSSファイルを入力してください）
これは「基本」という文字をクリックしたら、スタイルシートを前回までの課題のCSSファイルに切り替えるという意味
になります。「基本」という文字の部分は別の言葉に変えてもかまいません。他の箇所は変更しないでください。
さらに次の2行を追加します。
<a href="#" onclick="replace_css('cssid','0629学籍番号.css');">第11回</a>
<a href="#" onclick="replace_css('cssid','');">なし</a>
（注：「学籍番号」には、自分の学籍番号（c2092XXX）を入力してください）
ここまでの設定ができると、次のようなことができます。
「基本」という文字をクリックすると、前回の課題のスタイルシートでの表示に切り替わる
「第11回」という文字をクリックしたら、スタイルシートを「0629学籍番号.css」（今回作成）に切り替わる
「なし」をクリックするとスタイルシートを使わない表示に切り替わる
たとえば、リンク部分をdiv要素で囲んでおけば、次のような内容になります。
0
1
2
3
4
5
6
<div>
[
<a href="#" onclick="replace_css('cssid','0622c2092000.css');">基本</a> ￨
<a href="#" onclick="replace_css('cssid','0629c2092000.css');">第11回</a> ￨
<a href="#" onclick="replace_css('cssid','');">なし</a>
]
</div>
次へに進んでください。
2 - 課題(2): スタイルシートの切り替えの準備をする

Download Report