JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】

JavaScriptを使えば、ページに読み込まれたスタイルシートに対して動的にCSSルールを操作できます。その中心的な役割を果たすのが insertRule() メソッドと deleteRule() メソッドです。

  • insertRule(): スタイルシート内の指定した位置（インデックス）に新しいCSSルールを追加します。
  • deleteRule(): 指定したインデックスにある既存のスタイルルールを削除します。

以下の具体例を通じて、JavaScriptでスタイルシートへCSSルールを追加する方法を見ていきましょう。

例1：insertRule()で新しいルールを追加する

<!DOCTYPE html>
<html>
<head>
<style type="text/css" id="custom">
body {
    background-color: silver;
}
</style>
</head>
<body>
<h1>Custom CSS!</h1>
<p>Woohoo!</p>
<script>
let newSheet = document.getElementById('custom').sheet
let cs = 'p {';
    cs += 'margin: 4%;';
    cs += 'padding: 2%;';
    cs += 'font-size: 22px;';
    cs += 'box-shadow: -10px 4px 0 chartreuse;';
    cs += '}';
newSheet.insertRule(cs, 0);
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような表示になります。

JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】

この例では、getElementById() で取得した <style> 要素の sheet プロパティからCSSStyleSheetオブジェクトを取得し、p 要素向けのスタイル文字列を組み立てています。insertRule(cs, 0) の第2引数に 0 を指定することで、ルールがスタイルシートの先頭に挿入され、既存のルールよりも優先的に適用されます。

例2：deleteRule()とinsertRule()を組み合わせる

<!DOCTYPE html>
<html>
<head>
<style type="text/css" id="demo">
div {
    margin: 3%;
    text-align: center;
    background-color: powderblue;
}
p {
    box-shadow: 0 0 12px rgba(0,0,0,0.6);
}
h2 {
    color: red;
}
</style>
</head>
<body>
<div>
<h2>Custom CSS!</h2>
<p>Woohoo!</p>
</div>
<script>
let mySheet = document.getElementById('demo').sheet
let cs = 'h2 { border: 2px solid green; }'
mySheet.deleteRule(2);
mySheet.insertRule(cs, 0);
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような表示になります。

JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】

この例では、まず deleteRule(2) によって3番目のルール（インデックス2、つまり h2 { color: red; }）を削除しています。その後、insertRule(cs, 0) で「緑色の枠線を持つ h2」という新しいルールを先頭に追加しています。その結果、見出しは赤色から緑のボーダー付きスタイルへと変化します。

ポイントまとめ

  • insertRule(ruleText, index)：第1引数にCSSルールの文字列、第2引数に挿入位置のインデックスを指定します。インデックスを省略または 0 にすると先頭に追加されます。
  • deleteRule(index)：削除したいルールのインデックス番号を指定します。存在しないインデックスを指定するとエラーになるため注意が必要です。
  • スタイルシートオブジェクトは document.styleSheets や、対象の <style>／<link> 要素の .sheet プロパティから取得できます。

これらのメソッドを活用すれば、ユーザーの操作や条件に応じてスタイルを動的に切り替えるなど、柔軟なフロントエンド開発が可能になります。

  1. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo

  2. CSSでホバー時にトランジション（アニメーション）を追加する方法を解説

    CSSでホバー時にトランジション（滑らかなアニメーション効果）を追加するには、transitionプロパティと:hover疑似クラスを組み合わせて使用します。あらかじめ要素にtransitionを設定しておくことで、ホバー時の変化が瞬時に切り替わるのではなく、指定した時間をかけてスムーズに変化するようになります。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q