スタイルの制御

スタイルシート (CSSStyleSheet) / 外部CSS (External CSS)

スタイルシートの制御はブラウザによって挙動が異なります。よってその必要がないならば、インラインスタイルで制御します。

ドキュメントに適用されたスタイルシートにはDocumentのプロパティstyleSheets[]からアクセスでき、CSSStyleSheetオブジェクトで返されます。ただし代替スタイルシートをサポートしていないブラウザのstyleSheets[]には、そのスタイルシートは含まれません。よって確実にスタイルシートにアクセスするには、link要素にid属性を設定し、Document.getElementById()でそれを取得します。

このドキュメントにリンクされたスタイルシート

スタイルシートに格納されている各ルールには、cssRules[] (IEではrules[]) からアクセスできます。

メソッド
メソッド 説明
insertRule 新しいルールをスタイルシートに挿入する
deleteRule ルールをスタイルシートから削除する

スタイルシート オブジェクトの階層

  • Document document
    • CSSStyleSheet styleSheets[0]
      • CSSRule cssRules[0]
      • CSSRule cssRules[1]
      • CSSRule cssRules[n]
    • CSSStyleSheet styleSheets[1]
    • CSSStyleSheet styleSheets[n]

スタイルシートの切り替え

CSSStyleSheet.disabledプロパティをtrue/falseに設定することで、スタイルシートを無効/有効にできます。これを利用すれば、代替スタイルシートの変更をプログラムから行えます。

disabledの値とスタイルシートの有効/無効
状態
true スタイルシートは無効で、ドキュメントに適用されない
false スタイルシートは有効で、ドキュメントに適用される

代替スタイルシートとして読み込んだ場合、ブラウザによってdisabledプロパティの初期値が異なります。IE9、Chrome 22、Safari 5で確認したところ、代替スタイルシートが適用されていなくてもdisabledがfalseとなっていました。その状態でfalseに設定してもスタイルシートは有効とならないため、代替スタイルシートを読み込んだ時点で明示的にtrueにする処理が必要です。

styleSheet.disabled = false; // IEなどではスタイルシートは有効とならない。
styleSheet.disabled = true;  // あらかじめ無効に設定することで、
styleSheet.disabled = false; //  有効の設定が機能する。

有効にするスタイルシートをチェックしてください。

スタイルシートを動的に読み込む方法

link要素を作成し、それをhead要素に追加します。

var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'sample.css';

document.getElementsByTagName( 'head' )[ 0 ].appendChild( link );
html - How to load up CSS files using Javascript? - Stack Overflow

スクリプトを動的に読み込む方法

style要素 (HTMLStyleElement) / 内部CSS (Internal CSS)

ドキュメントのstyle要素へは、HTMLElement同様にアクセスできます。ただしIE10より前はstyle要素へTextオブジェクトを追加できないため、styleSheetプロパティを介して文字列として設定します。html - How to create a <style> tag with Javascript - Stack Overflow

var style = document.createElement( 'style' );
style.type = 'text/css';

if( 'styleSheet' in style )
{
    // IE10より前 向け
    style.styleSheet.cssText = 'body{color:red} p{background-color:blue}';

    var head = document.getElementsByTagName( 'head' )[ 0 ];
    head.appendChild( style );
}
else
{
    // 主要なブラウザ向け
    style.appendChild( document.createTextNode( 'body{color:red}' ) );
    style.appendChild( document.createTextNode( 'p{background-color:blue}' ) );

    document.head.appendChild( style );
}

if( style.sheet )
{
    alert( style.sheet.cssRules[0].cssText );      // "body { color: red; }"
    alert( style.sheet.cssRules[0].selectorText ); // "body"
    alert( style.sheet.cssRules[0].style.color );  // "red"
}

style属性 (CSSStyleDeclaration) / インラインCSS (Inline CSS)

要素のスタイルへは、HTMLElement.styleプロパティからアクセスできます。このプロパティはCSSStyleDeclarationオブジェクトであり、文字列ではありません。またこのプロパティは要素のstyle属性を表すものであり、その要素のインラインスタイルで指定したものしか反映しません。つまりスタイルシートで指定されたスタイルの情報は、取得できません。

var p = document.createElement( 'p' );

p.style.color = 'red';
p.style.fontWeight = 'bold'; // プロパティ名に注意:font-weight → fontWeight
p.style.margin = '10px';     // 数値も文字列で指定

ブラウザによっては、p.style = 'color:red';のような文字列による指定を解釈するものもあります。たとえばFirefoxがそれですが、これは標準的な方法ではありません。

CSSRule.cssTextプロパティ

要素に適用される実際のスタイルを、文字列で表します。たとえば前述の例では、

alert( p.style.cssText );
// color: red; font-weight: bold; margin: 10px;

のように文字列で返されます。逆にこのプロパティから設定することで、CSSの命名規則のまま一括してスタイルを指定することもできます。CSSRule.cssText - Web API Interfaces | MDN

setAttribute()、getAttribute()メソッド

ElementのsetAttribute()、getAttribute()も属性を文字列として扱うため、CSSRule.cssText同様に処理できます。

p.setAttribute( 'style', 'font-weight:bold' );

alert( p.getAttribute( 'style' ) ); // "font-weight:bold"
alert( p.style.fontWeight );        // "bold"

style属性の命名規則

基本的に、CSSの属性名がそのままプロパティ名となります。ただしJavaScriptの識別子の規則に違反する属性名は、次の規則でプロパティ名が変更されます。

  • 属性名にハイフンが含まれる場合には、ハイフンを取り除きその直後の文字を大文字にする (例:font-family → fontFamily)
  • JavaScriptの予約語と同一の場合には、先頭に「css」という文字を追加する (例:float → cssFloat)

スタイルの削除

要素に設定したスタイルは、それに空文字を設定することで削除できます。how to remove css property using javascript? - Stack Overflow

p.style.color = '';

ただしこの方法で削除できるのは、styleプロパティなどインラインスタイルで設定されたスタイルのみで、スタイルシートで設定されたそれは削除できません。

参考

参考書

  • JavaScript 第5版 [オライリー・ジャパン] David Flanagan
    16章3「インラインスタイルの制御」と16章6「スタイルシートの制御」で、JavaScriptからスタイルを制御する方法が解説されています。