JavaScriptでスタイルシートを切り替える(1つのみの場合) |
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"); obj[0].href = sURL; |
---|---|
説 明 | スタイルシートが1つのみの場合で<link>タグの一番最初で外部CSSファイルが読み込まれている場合にはlinkタグのhref属性に切り替えるスタイルシートのURLを指定します。 |
サンプル | <html> <head> <title>スタイルシートを切り替える</title> <link rel="stylesheet" type="text/css" href="0.css"> <script type="text/javascript"><!-- function changeCSS(sURL) { var obj = document.getElementsByTagName("link"); obj[0].href = sURL; } //--></script> </head> <body> <h1>スタイルシートを切り替える</h1> <p> JavaScriptを使ってスタイルシートを切り替えます。<br> <form> <input type="button" value="0.css" onClick="changeCSS('0.css')"><br> <input type="button" value="1.css" onClick="changeCSS('1.css')"><br> <input type="button" value="2.css" onClick="changeCSS('2.css')"><br> </form> </p> </body> </html> |
補足説明 | なし |
■サンプルを実行する >>実行 ■各ブラウザでの動作結果を見る >>View! |