JavaScriptでスタイルシートを切り替える(複数の場合) |
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; i<sURL.length; i++) obj[i].href = sURL[i]; |
---|---|
説 明 | スタイルシートが複数ある場合で<link>タグの一番最初から外部CSSファイルが読み込まれている場合にはlinkタグの数だけhref属性に切り替えるスタイルシートのURLを指定します。 |
サンプル | <html> <head> <title>スタイルシートを切り替える</title> <link rel="stylesheet" type="text/css" href="0.css"> <link rel="stylesheet" type="text/css" href="f0.css"> <script type="text/javascript"><!-- function changeCSS(sURL) { var obj = document.getElementsByTagName("link"); for (var i=0; i<sURL.length; i++) obj[i].href = sURL[i]; } //--></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! |