スタイルシートの書き換え

CSSの設定方法

おもなCSS（Cascading Style Sheets）の設定方法をまとめてみます。

  1. HTML要素のstyle属性を設定する（インラインスタイル）
  2. スタイルシートを使う
    • CSSファイル（外部スタイルシート）
    • <style>タグ（ページ内スタイルシート）
  3. 動的に設定・変更する
    • DOMメソッド
    • style.cssTextプロパティ
    • styleプロパティ

1. HTML要素のstyle属性を設定する（インラインスタイル）

HTMLのstyle属性で設定したスタイルは、スタイルシートで指定されたスタイルを上書きします。

HTML

<div style="color: red;"></div>

2. スタイルシートを使う

セレクタ（要素や要素の組み合わせ）でスタイルを指定します。要素はIDやタグ名、クラスを使って表すことができます。
また、<style>タグは<script>タグと同様にHTMLとしては扱われません。

CSSファイル（外部スタイルシート）

HTML

<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="sample"></div>
...

CSS

#sample {
  color: red;
}

<style>タグ（ページ内スタイルシート）

HTML

<!DOCTYPE html>
<html>
<head>
<style>
  #sample {
    color: red;
  }	
</style>
</head>
<body>
  <div id="sample"></div>
...

3. 動的に設定・変更する

JavaScriptによりスタイルを動的に設定・変更することができます。

DOMメソッド

ElementオブジェクトのsetAttribute()メソッドを使ってスタイルを設定することができます。第一引数の属性名に”style”、第二引数にスタイル文字列を指定します。

Script

var elem = document.getElementById("sample");
elem.setAttribute("style", "color: red;");

style.cssTextプロパティ

上記DOMメソッドと同様のスタイル文字列を扱います。

Script

var elem = document.getElementById("sample");
elem.style.cssText = "color: red;";

styleプロパティ

styleプロパティは文字列ではなくCSSStyleDeclarationオブジェクトになります。このオブジェクトのCSSプロパティにスタイルの値として文字列を設定します。文字列には単位が必要になります。また、セミコロンは含めません。一般にプロパティアクセスのほうがDOMメソッドより高速といわれています。

Script

var elem = document.getElementById("sample");
elem.style.color = "red";

スタイルシートの書き換え

通常は要素のクラス属性やstyleプロパティを書き換えることで容易にスタイルを設定することができるので、スタイルシート自体を書き換えることはないと思います。スタイルシートの書き換えは、スクリプトで要素ひとつひとつにアクセスしながらスタイルを設定するという方式とは異なり、ページ全体のスタイルを変更することができます。

スタイルシートオブジェクトの構造

document.styleSheetsプロパティには、配列のようなオブジェクトであるCSSStyleSheetオブジェクトが格納されています。cssRules配列には、スタイルシートのルールが格納されています。disabledプロパティは、false/trueを設定することでスタイルシートを有効化／無効化することができます。

document
    .styleSheets[0]    // 一枚目のスタイルシート
        .cssRules          : null
        .disabled          : false
        .(略)
    .styleSheets[1]    // 二枚目のスタイルシート
        .cssRules[0]       // 一個目のルール
            .cssText           : "#sample { color: red; }"
            .selectorText      : "#sample"
            .style
                .color             : "red"
                .fontSize          : "20px"
                .(略)
        .cssRules[1]       // 二個目のルール
            .(略)
        .cssRules[2]       // 三個目のルール
            .(略)
        .disabled          : false
        .(略)

なお、<link>タグで指定したcssファイルのルール（cssRules）はnullになるようです。また、cssRulesのcssTextは読み取り専用で直接書き換えることはできないようです。

ルールの追加／削除

ルールの追加や削除はスタイルシートのメソッドであるinsertRule()やdeleteRule()で行うことができます。このときの引数はスタイル文字列とルールのインデックスになります。

Script

document.styleSheets[1].insertRule("#sample { color: red; }", 0);
document.styleSheets[1].deleteRule(0);

また、cssRules[].styleプロパティにはCSSプロパティ一式が格納されており、これを直接読み書きすることができます。

Script

document.styleSheets[1].cssRules[0].style.color = "red";

以下に、必要に迫られて作ったものの後になって必要がないことに気づき愕然としたスタイルシート書き換えのサンプルを掲載します。

See the Pen stylesheet overwrite test by senmyou (@senmyou) on CodePen.

私がスタイルシートの書き換えが必要だと思ったのは、contenteditable属性を使ったときリターンキーの入力で自動的に生成されるdiv要素に動的にスタイルを設定したかったからです。div要素を生成するコード（createElement()など）は隠蔽されているため、div要素にアクセスできそうにありませんでした。そこで、セレクタ “#parent > div” のスタイルを変更できればdiv要素にアクセスしなくてもスタイルが変更できるのではと調べていたところ、スタイルシートの書き換えにたどり着きました。
ところが、スタイルシートの操作関数を作成し動作確認しているとき、このdiv要素は兄弟要素のスタイルを引き継いで生成されるということに気づきました。つまり、スタイルシートを書き換えなくても兄弟要素のstyleプロパティを変更するだけでよかったのです。。。
いつか使う日が来るといいなと思ってます。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA