ここから本文です

Javascriptでスタイルシートを変更・更新したい。

msp********さん

2016/3/1217:26:34

Javascriptでスタイルシートを変更・更新したい。

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

このstyle.css のstyleの部分をred.cssとかblue.cssにドロップダウンメニューで

選択した瞬間に変更できるようにしたいのですが、どんな感じのソースになりますか?

http://allabout.co.jp/gm/gc/23930/

ここに書いてあるようなことをやりたいのですが・・・・。よくわかりません。

閲覧数:
220
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

ソラリアさん

2016/3/1218:55:57

そのリンク先を読んで分からないならここに書いたのも理解できないよ。
リンク先の記事読んだけど、そこにあるのが全てです。読んで分からなければ諦めましょう。

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜1件/1件中

ven********さん

2016/3/1300:18:49

こんばんわ~♪


◆◆◆ しくみ ◆◆◆

やっていることは、
CSS ファイル「style.css」を読み込んでいるコード
・────────
<link rel="stylesheet" type="text/javascript" href="style.css">
────────・
の href 属性を変更しているだけですね。
href 属性は、
読み込む CSS ファイルを指定している属性なので、
値を変更すると読み込まれる CSS ファイルが変わります。
HTML では属性の書き換えはできないので、
Javascript を使って <link> の href 属性を書き換えます。


◆◆◆ コードの作り方 ◆◆◆

さて、
CSS を読み込む <link> 要素を Javascript で書き換えるためには、
この <link> 要素を Javascript のコード内で指名して取得しないと、
書き換えることなんてできませんょね。
特定の要素を指名して取得できるようにするには
いろいろな方法がありますが、
要素に id を付けておく、というのが一番簡単な方法です。
・────────
<link id="mystyle"
rel="stylesheet" type="text/css" href="style.css">
────────・
こうすると、
Javascript では、この <link> 要素を下記のように指名して取得できるようになります。
・────────
document.getElementById("mystyle")
────────・

これで、
<link> の href 属性を書き換えることができるようになりましたね♪
Javascript で
・────────
document.getElementById("mystyle").href = "red.css";
────────・
というコードを実行すれば、
<link id="mystyle"> の href 属性が red.css に書き換えられます。
・────────
<link id="mystyle" ~ href="style.css">
. . . . │
. . . . │ 書き換え
. . . . ↓
<link id="mystyle" ~ href="red.css">
────────・
その結果、
読み込まれている CSS ファイルが「style.css」から「red.css」に
切り替わります。

あとは、
href 属性を切り替える Javascript コードを、
どのタイミングで実行するか、です。
今回は、
セレクトボックスから選択して CSS を切り替えるので、
セレクトボックスで選択したときに実行します。
そのためには、
<select> 要素の onchange 属性に Javascript のコードを仕込みます。
・────────
<select
onchange="document.getElementById('mystyle')=this.value;"
>
<option value="style.css" selected>デフォルト</option>
<option value="red.css">赤</option>
<option value="blue.css">青</option>

</select>
────────・
onchange 属性内で「this」を使った場合、
「this」はその要素自身を指します。
なので、
上記の「this」は <select> 要素自身を指し、
「this.value」は <select> 要素で選択されている <option> の value 値になります。

以上で完成ですが、
onchange 属性の中身…、生のコードをそのまま書いているので長いですね。
今回はたまたま1行だけなので、
まだそれほどソースが汚くならないですが、
実行したい Javascript が長くなると、非常に煩雑になります。
そこで、
onchange で実行する長いコード一式は、
あらかじめ「関数」という形で、ひとまとめにして作っておきます。
関数の名前を changeStyle() とすると
・────────
function changeStyle( cssid, cssfile ){
document.getElementById( cssid ).href = cssfile;
}
────────・
のようになります。
「cssid」と「cssfile」は、
<link> 要素の id と、切り替える CSS ファイルのパスを、
この関数を実行するときに指定できるようにするため、
関数の「引数」として用意したものです。
つまり、
この関数を使って、
・────────
changeStyle( "mystyle", "red.css" );
────────・
のように実行すると、
・────────
document.getElementById( "mystyle" ).href = "red.css";
────────・
というコードが実行される、という仕組みです。

<select> の onchange 属性を、
この関数 changeStyle() を使って書き替えると、
・────────
<select onchange="changeStyle( 'mystyle', this.value )">
<option value="style.css" selected>デフォルト</option>
<option value="red.css">赤</option>
<option value="blue.css">青</option>

</select>
────────・
これで、スッキリしましたね*゜▽^)b'


◆◆◆ 実施例 ◆◆◆

以上を踏まえて、
全体のソースコードの実施例を示します。

・────────
<!DOCTYPE html>
<html>
<head>
<title>CSSの切り替え</title>

<!-------- スタイルシート(CSS) -------->
<link rel="stylesheet" type="text/css" href="style.css" id="mystyle">

<!-------- スクリプト -------->
<script type="text/javascript">
function changeStyle( cssid, cssfile ){
document.getElementById( cssid ).href = cssfile;
}
</script>

</head>

<body>

<!-------- セレクトボックス -------->
<select onchange="changeStyle( 'mystyle', this.value )">
<option value="style.css" selected>デフォルト</option>
<option value="red.css">赤</option>
<option value="blue.css">青</option>
</select>

</body>

</html>
────────・

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる