disabledプロパティでスタイルの有効／無効を設定
■styleSheetオブジェクト.disabledプロパティ
・ページ内に適用されているstyleSheetオブジェクトの有効／無効を設定する
・true ･･･無効にdisabled01.html＞
false ･･･有効に
Sample
Sample Source......................................................................>>>
<link rel="stylesheet" href="../css_css.css" type="text/css">
<style type="text/css"><!--
div#content div.sample h5{
background-color:lavender;color:red;border:1px solid blue;
}
--></style>
<style type="text/css"><!--
div#content div.sample h5{
background-color:powderblue;color:blue;border:4px double navy;
}
--></style>
<style type="text/css"><!--
div#content div.sample h5{
background-color:linen;color:magenta;border:2px dotted deeppink;
}
--></style>
<script type="text/javascript"><!--
function Style(n){
var sheets = document.styleSheets;
//外部CSSファイルは触りたくないのでindex番号は1から始めている
for(var i = 1;i<sheets.length;i++){
if(i == n)sheets[i].disabled = false; //有効に
else sheets[i].disabled = true; //無効に
}
}
// --></script>
</head>
<body>
<div class="sample">
<h5>Sample</h5>
<button onclick="Style(1)">スタイル 1</button>
<button onclick="Style(2)">スタイル 2</button>
<button onclick="Style(3)">スタイル 3</button>
</div>