JavaScriptでスタイルシートを切り替える(複数の場合2) |
Internet Explorer | Netscape Navigator | Firefox | iCab | Safari | Opera | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
3.0x | 4.0x | 4.5 | 5.0x | 5.5 | 6.0 | 2.0x | 3.0x | 4.0x | 4.x | 6.0 | 7.0 | 1.0.x | 2.x | 1.x | 7.x | 8.x | |
Windows | × | × | - | ○ | ○ | ○ | × | × | × | × | ○ | ○ | - | - | |||
Macintosh | × | × | × | × | - | - | × | × | × | × | ○ | ○ | ○ | × | ○ | ○ | ○ |
UNIX | - | - | - | - | - | - | × | × | × | × | ○ | ○ | - | - |
ポイント | var obj = document.getElementsByTagName("link"); for (var i=0, cnt=0; i<obj.length; i++) { if (obj[i].type == "text/css") obj[i].href = sURL[cnt++]; } |
---|---|
説 明 | スタイルシートが複数ある場合で<link>タグでtype属性がCSSのもののみ切り替えを行います。linkタグの数だけhref属性に切り替えるスタイルシートのURLを指定します。関数に渡すパラメータの数と切り替えるlinkタグの数と順番は合わせておく必要があります。 |
サンプル | <html> <head> <title>スタイルシートを切り替える</title> <link rel="stylesheet" type="text/css" href="0.css"> <link rel="next" href="page1.html"> <link rel="prev" href="index.html"> <link rel="stylesheet" type="text/css" href="f0.css"> <link rel="start" href="../../index.html"> <script type="text/javascript"><!-- function changeCSS(sURL) { var obj = document.getElementsByTagName("link"); for (var i=0, cnt=0; i<obj.length; i++) { if (obj[i].type == "text/css") obj[i].href = sURL[cnt++]; } } //--></script> </head> <body> <h1>複数のスタイルシートを切り替える</h1> <p> JavaScriptを使って複数のスタイルシートを切り替えます。<br> <form> <input type="button" value="0.css" onClick="changeCSS(['0.css','f0.css'])"><br> <input type="button" value="1.css" onClick="changeCSS(['1.css','f1.css'])"><br> <input type="button" value="2.css" onClick="changeCSS(['2.css','f0.css'])"><br> </form> </p> </body> </html> |
補足説明 | なし |
■サンプルを実行する >>実行 ■各ブラウザでの動作結果を見る >>View! |