HTMLページ表示中にスタイルシートを切り替える方法（IE6.0）
<link>タグでファイル数分のスタイルシートを指定する。その際、rel属性の値を、最初に表示するファイルはstylesheet、それ以外はalternate stylesheetにする。
JavaScriptのdocument.styleSheets配列にスタイルシートの情報が格納されているので、スクリプトで各要素のdisabled値を変更して、表示したいシートのみ有効にする。
例：
<html>
<head>
<link rel="stylesheet" type="text/css" id="aaa" href="aaa.css">
<link rel="alternate stylesheet" type="text/css" id="bbb" href="bbb.css">
<link rel="alternate stylesheet" type="text/css" id="ccc" href="ccc.css">
<script language="javascript">
<!--
function cssselect(cssid) {
for (var i = 0; i < document.styleSheets.length; i++) {
document.styleSheets[i].disabled = (document.styleSheets[i].id != cssid);
}
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="AAA" onclick="cssselect('aaa');">
<input type="button" value="BBB" onclick="cssselect('bbb');">
<input type="button" value="CCC" onclick="cssselect('ccc');">
</form>
</body>
</html>
0 件のコメント: