スタイルルールの追加と削除
■ルールを追加するメソッド
・IEの場合 ･･･stylesheetオブジェクト.addRule(セレクタ, 値, 位置)
*位置は0から始まるindex番号。位置は省略可能、その場合末尾に挿入される
(例)stylesheetオブジェクト.addRule("h2", "color:red", 1)
・IE以外 ･･･stylesheetオブジェクト.insertRule(セレクタ{値}, 位置)
*位置は0から始まるindex番号。省略できない
(例)stylesheetオブジェクト.insertRule("h2 {color:red}", 1)
■ルールを削除するメソッド
・IEの場合 ･･･stylesheetオブジェクト.removeRule(位置)
・IE以外 ･･･stylesheetオブジェクト.deleteRule(位置)
* 位置は0から始まるindex番号
Sample
↑上の[ Sample ]の背景色と文字色を変更できます。
背景色：
文字色：
･･･→
追加した全てのスタイルを削除し
Sample Source......................................................................>>>
<style type="text/css"><!--
h2 {width:300px;font:16px 'Arial Black';color:black;border:3px
double green;text-align:center;
}
--></style>
<script type="text/javascript"><!--
function AddCss(){ //ルールの追加
var sele1 = document.getElementById('bgc');
var idx1 = sele1.selectedIndex;
var bc = sele1[idx1].value; //リストから背景色を取得
var sele2 = document.getElementById('ftc');
var idx2 = sele2.selectedIndex;
var fc = sele2[idx2].value; //リストから文字色を取得
var str = "h2 {background-color:" + bc + ";color:"
+ fc + "}"; //IE以外の引数を作成
var str_ie = "background-color:" + bc + ";"
+ "color:" + fc + ";"; //IE用の引数を作成
var sheet = document.styleSheets[document.styleSheets.length
- 1]; // 最後のスタイルシートを取得
if(sheet.cssRules){ //IE以外の場合
sheet.insertRule(str,sheet.cssRules.length); //位置を末尾に指定
}else{ //IEの場合
sheet.addRule("h2", str_ie); //位置は省略、末尾に追加される
}
}
function ResetCss(){ //ルールの削除
var sheet = document.styleSheets[document.styleSheets.length - 1]; // 最後のスタイルシートを取得
if(sheet.rules){ //IEの場合
//ルールの最後から削除していく。先頭から削除するとindex番号がズレてしまう
for(var i=sheet.rules.length-1;i > 0;i--){
sheet.removeRule(i);
}
}else{ //IE以外
for(var i=sheet.cssRules.length-1;i > 0;i--){
sheet.deleteRule(i);
}
}
}
// --></script>
</head>
<body>
<h2>Sample</h2>
<p class="sample">↑上の[ Sample ]の背景色と文字色を変更できます。<br>
背景色：
<select id="bgc">
<option value="white" selected>白色
<option value="lavender">薄青色
<option value="beige">薄黄色
<option value="gainsboro">薄灰色
</select>
文字色：
<select id="ftc">
<option value="black" selected>黒色
<option value="darkblue">濃青色
<option value="darkgreen">濃緑色
<option value="red">赤色
</select>
･･･→<button id="bt" onclick="AddCss();">スタイルを追加</button></p>
<p>追加した全てのスタイルを削除し<button onclick="ResetCss()">初期値に戻す</button></p>